Question

我的网站在Android手机上的Chrome浏览器上存在缩放问题。在移动设备或任何桌面浏览器中的Firefox中都不会发生这种情况。选择导航栏并下拉后，它会缩放网页。请注意，根据选择的下拉列表，页面的缩放方式会有所不同。似乎导航栏具有隐藏的内容，当使用下拉行为时，该内容会打破框架。

我已将这个问题的4个屏幕截图拼接在一起。

非常感谢帮助修复或解决方法。

scaling issue

#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>

Answer 1

将其添加到您所有网页的head部分。

<meta name="viewport" content="user-scalable=0">

来自google developers site

如果没有视口，移动设备将以典型的桌面屏幕宽度呈现页面，缩放以适合屏幕。

因此，当您访问移动设备上的网页时，视图实际上会缩小以适合您的所有内容。当您触摸导航栏时，浏览器也会尝试放大。设置user-scalable=0可以防止这种情况发生。

缺点是您的用户将无法再在移动设备上缩放网站缩放，但唯一的选择是重写您的网站以使用流畅的布局。

Answer 2

包含下拉项目的<ul>的宽度= 100％。这意味着宽度将是第一个相对定位的父级的100％（在这种情况下是<body>）。这导致x轴溢出。

您可以将<ul>的宽度设为25％，将<li>设置为100％，而不是现在<li>为25％的范围。

给你

/* This customizes the ul elements in the sub-menu. */
nav ul ul{
position:absolute;
padding:0;
width:25%;
}

和

/* I think this refers to the dropdown navbar location and properties. */
nav ul ul li {
position:relative;
width:100%;
}

Answer 3

我去了你的网站并快速检查了一下......我注意到你正在使用绝对定位将你的内容定位在页面的中心。我认为这是导致你的问题的原因。

我会查找一个关于如何创建重复背景图像的教程，并使用它而不是尝试使用一个图像而不重复。那么你可以用保证金来集中你的内容：0 auto。

我知道这不是一个明确的答案，但我希望它能使你朝着正确的方向前进。

Answer 4

我想出的解决方法是在我的叠加层上设置overflow-x：hidden。我以前在身体上尝试了这个，但在Android上溢出-x对身体不起作用;必须为容器设置它。可能有一个相关的原因，这个问题只出现在Android上。这种解决方法非常有效。

为什么我的导航栏会在移动设备上缩放页面？

4 个答案: