Question

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

为了让移动浏览器正确显示网页（专为桌面浏览器设计），需要提供哪些代码？

请建议。

由于

Answer 1

感谢您提供的建议。

略有修改解决了这个问题。

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

这很有用。

Answer 2

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

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

Answer 3

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

请尝试以上操作。内容宽度设置为与容器div的内容相匹配，并删除最大比例以允许用户放大。

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

3 个答案: