javascript - 为什么我重新访问页面时字体大小会发生变化
问题描述
出于某种原因,在我的移动菜单上,当我重新访问页面时,链接的字体大小会发生变化。我有另一个使用完全相同的 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;
}
解决方案
看起来一切都很好。也许你错过了一些风格:
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>
推荐阅读
- typescript - Vercel deploy / build fail. "Failed to compile. Type error: Cannot find module ... or its corresponding type declarations
- date - Google 表格时间日期格式 2016-12-01T10:21:43.000Z 不被识别为 DATATIME
- javascript - 为什么在单击时将更改的值写入原始数组
- windows - 如何在 Windows 10 上使用 WiX 使程序在启动时运行(以管理员身份)
- css - 为什么我的样式化组件生成的类名会发生冲突?
- node.js - modbus-serial,有没有办法打开和关闭MobusTCP Server?
- javascript - 在任何嵌套级别上收集对象值
- firebase - Flutter/Firestore:按类别显示网格
- javascript - Jest - 测试在反应变量中声明的 Vue.js 函数
- javascript - 如何使用 JQuery AJAX 作为删除请求发送 XML 数据?