我的网站在移动设备上的android中的chrome浏览器上出现缩放问题。在移动版Firefox或任何桌面浏览器中都不会发生这种情况。选择导航栏并将其放下时,它将缩放网页。请注意,根据所选的下拉菜单,页面的缩放比例会有所不同。导航栏似乎具有不可见的内容,在执行下拉行为时会破坏框架。
我将这个问题的4个屏幕截图拼接在一起。
修复或解决方法的帮助将不胜感激。
#NavigationBarList{
list-style-type:none;
padding:0;
}
li{
font-size:130%;
}
nav a{
display:block;
}
/* This customizes the presentation of the list elements (menu items) in the navbar. */
nav li{
display:block;
font-weight:bold;
font-size:200%;
color:#7F1717;
background-color:#9E939E;
width:25%;
text-align:center;
text-decoration:none;
text-transform:uppercase;
z-index:11;
-moz-box-shadow: inset 0 0 1px #000000;
-webkit-box-shadow: inset 0 0 1px #000000;
box-shadow: inset 0 0 1px #000000;
}
nav ul{
width:100%;
}
/* Hide the sub menu items. */
nav ul ul {
display:none;
}
nav ul ul ul {
display:none
}
/* When hovered over, the CSS menu will drop down. */
nav li:hover > ul {
text-align:center;
font-size:40%;
display:block;
}
/* Don't underline links in the list elements (menu items). */
ul a {
text-decoration:none;
color:#7F1717;
}
/* Change the background color of hovered list elements. This was both active and hover... */
nav li:hover{
background-color:#625C62;
}
/* This customizes the ul elements in the sub-menu. */
nav ul ul{
position:absolute;
padding:0;
width:100%
}
nav ul ul ul{
position: absolute;
width:400%;
left:100%;
top:0;
}
#totheleft{
left:-100%;
}
nav ul ul ul li{
text-align:center;
font-size:250%;
}
/* I think this refers to the dropdown navbar location and properties. */
nav ul ul li {
position:relative;
}
<nav>
<ul id="NavigationBarList">
<li style="float:left;">Events
<ul>
<li><a href="tournaments.html">Tournaments</a></li>
<li><a href="kids_hour.html">Kid's Hour</a></li>
<li><a href="calendar.html">Local Calendar</a></li>
</ul>
</li>
<li style="float:left;">Programs
<ul>
<li><a href="summer_camps.html">Summer Camps</a></li>
<li>In Schools
<ul>
<li><a href="schools.html">After School</a></li>
<li><a href="school_registration.html">Registration</a></li>
</ul>
</li>
<li><a href="instructors.html">Local Instructors</a></li>
</ul>
</li>
<li style="float:left;">Content
<ul>
<li><a href="posts.html">Posts</a></li>
<li><a href="games.html">Games</a>
</ul>
</li>
</li>
<li style="float:left;">Connect
<ul>
<li><a href="contact.html">Contact Us</a></li>
<li>Resources
<ul id="totheleft">
<li><a href="links.html">Chess</a></li>
<li><a href="go_links.html">Go</a></li>
<li><a href="xiangqi_links.html">Xiangqi</a></li>
<li><a href="shogi_links.html">Shogi</a></li>
<li><a href="backgammon_links.html">Backgammon</a></li>
</ul>
</li>
<li><a href="about us.html">About Us</a></li>
</ul>
</li>
</ul>
</nav>
我想出的解决方法是在覆盖上设置overflow-x:hidden。我之前曾在人体上尝试过此方法,但在Android over-x上无法在人体上使用;必须为容器设置它。可能有一个相关原因,此问题仅在Android上出现。此解决方法完美地工作。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句