为什么移动浏览器（iPhone）中出现水平滚动？答案

【问题标题】：Why does a horizontal scroll appear in mobile browser(iPhone)?为什么移动浏览器（iPhone）中出现水平滚动？
【发布时间】：2012-04-18 18:09:02
【问题描述】：

我编写了一个html页面如下：

 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Test</title>
 </head>
 <body bgcolor="#f2f2f2">

     <div style="width:1000px;height:auto;margin:0px auto;" ><!-- main container -->
         <div style="width:1000px;height:50px;margin:0px auto; background-color:pink;" ><!-- container 2 -->
           Hello world
          </div> <!-- end container 2 -->
     </div> <!-- end main container -->

 </body>
</html>

div 的宽度为 1000px，使用属性 margin:0px auto 居中对齐；当我在桌面浏览器中查看时，它很好。但是在移动浏览器（iPhone Safari）中，我得到了一个不需要的水平滚动，整个页面也是水平和对角浮动的。

为什么会这样？

如何解决这个特定于 iPhone/iPad 浏览器的问题。我没有在其他手机上测试过。

我需要输入哪些代码才能使移动浏览器正确显示网页（专为桌面浏览器设计）？

请提出建议。

谢谢

【问题讨论】：

我还注意到一件事。如果我将主容器 div 的高度硬编码为 1500px 或更高，则问题在一定程度上得到了解决。滚动不会在加载时出现。如果 iPhone 旋转到横向模式，然后当我以纵向模式查看时，就会出现问题。但是，我不能保持高度硬编码。

标签： html css browser mobile

【解决方案1】：

感谢您提供的建议。

稍作修改即可解决问题。

<meta name="viewport" content="width=1000" />

这行得通。

【讨论】：

【解决方案2】：

尝试将此行添加到头部：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

【讨论】：

如果我加上这行，那么手机浏览器屏幕就不能放大缩小了。此外，默认情况下，网页会放大显示。
我不是这方面的专家，但要缩放屏幕，您应该尝试使用最大比例和最小比例值。顺便说一句，您应该阅读这篇文章：learnthemobileweb.com/blog/2009/07/mobile-meta-tags。当涉及到水平滚动时，尝试添加到主容器和容器溢出：隐藏。我认为您还应该避免以 px 为单位的宽度。尝试使用百分比值。

【解决方案3】：

<meta name="viewport" content="width=1000, initial-scale=1" />

请尝试上述方法。内容宽度设置为匹配容器 div 的宽度，并移除了最大比例以允许用户放大。

【讨论】：