0

我编写了一个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 浏览器的问题。我没有在其他手机上测试过。

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

请建议。

谢谢

4

3 回答 3

3

感谢您提供的建议。

稍作修改就解决了这个问题。

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

这行得通。

于 2012-04-18T10:09:02.367 回答
1

尝试将此行添加到 head 部分：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
于 2012-04-10T09:00:38.520 回答
0 
<meta name="viewport" content="width=1000, initial-scale=1" />

试试上面的，而不是。内容宽度设置为与容器 div 的宽度相匹配，并删除了最大比例以允许用户放大。

于 2012-04-10T10:29:31.307 回答