javascript - 为什么我重新访问页面时字体大小会发生变化

Question

由于某种原因，当我重新访问该页面时，在我的移动菜单上链接的字体大小会发生变化。我有另一个使用完全相同的 javascript 和 CSS 的页面，并且当您重新访问时链接的字体大小不会改变，taht 页面没有 iframe，所以我假设它与字体大小发生变化的页面相关联有 iframe

当我在浏览器上使用开发工具对其进行测试时，它并没有改变，但是当在我的 Iphone X 上进行测试时，它似乎确实发生了变化，我会附上一段视频，您可以在我重新访问页面时看到字体大小调整器出现更小，当点击其中一个链接时，填充或边距似乎增加 出于某种原因

这里是gif格式的视频 https://giphy.com/gifs/RMGsA6Dg4Y9p6IvE4E

var iframes = document.getElementsByTagName('iframe');
var form = document.getElementsByTagName('form');
function toggleMobileMenu(){
//show menu
if(document.getElementById("testingdrop").style.visibility != "visible"){
    document.getElementById("testingdrop").style.visibility = "visible";
    document.getElementById("testingdrop").style.transition = "0.5s";
    document.getElementById("testingdrop").style.width = "55%";
    document.getElementById("dropdownIcon").style.color = "#ffc800";
    //get all iframes elements and change opacity
    for(var i=0; i<frames.length; i++){
        iframes[i].style.opacity = "0.5";
    }
}
//hide menu
else{
    document.getElementById("testingdrop").style.visibility = "hidden";
    document.getElementById("testingdrop").style.width = "200%";
    document.getElementById("dropdownIcon").style.color = "black";
    for(var i=0; i<frames.length; i++){
        iframes[i].style.opacity = "1";
    }
}
}

HTML

   <div class="dropdown" id="testingdrop">
   <ul>
            <a href="./Home.html" class="mobilemenu"><li>HOME</li></a>
            <a href="./videos.html" class="mobilemenu"><li>VIDEOS</li></a>
            <a href="./enquiry.html" class="mobilemenu"><li>ENQUIRIES</li></a>
            <a href="https://www.instagram.com/thegreatmurshed/" class="mobilemenu"><li>INSTAGRAM</li></a>
            <a href="https://www.instagram.com/umarmiahfarooq/" class="mobilemenu" id="devBy"><li id="debByListItem">A WEBSITE BY <br>@UMARMIAHFAROOQ</li></a>
        </ul>
    </div>

CSS

#testingdrop{
  visibility: hidden;
  text-decoration: none;
  color: black;
  font-family: 'Raleway', sans-serif;
  display: grid;
  grid-template-columns: 55% auto;
  grid-template-rows: 29em;
  padding-bottom: 20px;
  position: fixed;
  z-index: 1;
  transition: 0.5s;
  width: 200%;
}
li{
  list-style-type: none;
  padding-bottom: 3px;
  padding-left: 4px;
  left: -11.4%;
  grid-column-start: 2;
  transition: margin-left .5s;
  z-index: 2;
}
ul{
  width: 100%;
  left: 3px;
  grid-column-start: 2;
  padding-bottom: 560%;
  padding-right: 82%;
  background: white/*#171717*/;
  transition: margin-left .5s;
  z-index: 2;
}
.mobilemenu{
  text-decoration: none;
  color: black;
  grid-column-start: 2;
  z-index: 2;
}
#devBy{
  color: #ffc800;
  font-size: 40%;
  z-index: 2;
}
#debByListItem{
  margin-top: 10%;
  z-index: 2;
}

Answer 1

看起来一切都很好。也许你错过了一些风格:

var iframes = document.getElementsByTagName("iframe");
var form = document.getElementsByTagName("form");

function toggleMobileMenu() {
  //show menu

  if (document.getElementById("testingdrop").style.visibility != "visible") {
    document.getElementById("testingdrop").style.visibility = "visible";
    document.getElementById("testingdrop").style.transition = "0.5s";
    document.getElementById("testingdrop").style.width = "55%";
    document.getElementById("dropdownIcon").style.color = "#ffc800";
    //get all iframes elements and change opacity
    for (var i = 0; i < frames.length; i++) {
      iframes[i].style.opacity = "0.5";
    }
  } else {
    //hide menu
    document.getElementById("testingdrop").style.visibility = "hidden";
    document.getElementById("testingdrop").style.width = "200%";
    document.getElementById("dropdownIcon").style.color = "black";
    for (var i = 0; i < frames.length; i++) {
      iframes[i].style.opacity = "1";
    }
  }
}

#testingdrop {
  visibility: hidden;
  text-decoration: none;
  color: black;
  font-family: "Raleway", sans-serif;
  display: grid;
  grid-template-columns: 55% auto;
  grid-template-rows: 29em;
  padding-bottom: 20px;
  position: fixed;
  z-index: 1;
  transition: 0.5s;
  width: 200%;
}

li {
  list-style-type: none;
  padding-bottom: 3px;
  padding-left: 4px;
  left: -11.4%;
  grid-column-start: 2;
  transition: margin-left 0.5s;
  z-index: 2;
}

ul {
  width: 100%;
  left: 3px;
  grid-column-start: 2;
  padding-bottom: 560%;
  padding-right: 82%;
  background: white;
  transition: margin-left 0.5s;
  z-index: 2;
}

.mobilemenu {
  text-decoration: none;
  color: black;
  grid-column-start: 2;
  z-index: 2;
}

#devBy {
  color: #ffc800;
  font-size: 40%;
  z-index: 2;
}

#debByListItem {
  margin-top: 10%;
  z-index: 2;
}

<div class="dropdown" id="testingdrop">
  <ul>
    <a href="./Home.html" class="mobilemenu">
      <li>HOME</li>
    </a>
    <a href="./videos.html" class="mobilemenu">
      <li>VIDEOS</li>
    </a>
    <a href="./enquiry.html" class="mobilemenu">
      <li>ENQUIRIES</li>
    </a>
    <a href="https://www.instagram.com/thegreatmurshed/" class="mobilemenu">
      <li>INSTAGRAM</li>
    </a>
    <a href="https://www.instagram.com/umarmiahfarooq/" class="mobilemenu" id="devBy">
      <li id="debByListItem">A WEBSITE BY <br>@UMARMIAHFAROOQ</li>
    </a>
  </ul>
</div>

<a href="#" onclick="toggleMobileMenu()">Toggle Menu</a>