Html 为什么手机浏览器（iPhone）中会出现水平滚动？_Html_Css_Browser_Mobile

Html 为什么手机浏览器（iPhone）中会出现水平滚动？

html css browser mobile

Html 为什么手机浏览器（iPhone）中会出现水平滚动？,html,css,browser,mobile,Html,Css,Browser,Mobile,我编写了一个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;

我编写了一个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，并使用属性边距进行中心对齐：0px auto；当我在桌面浏览器中查看时，一切正常。但在移动浏览器（iPhone Safari）中，我得到了一个不需要的水平滚动条，整个页面也沿水平和对角方向浮动

为什么会发生这种情况

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

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

请建议

谢谢

尝试将此行添加到标题部分：

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

尝试将此行添加到标题部分：

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

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

感谢您提供的建议

稍微修改一下就解决了这个问题

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

这很有效。

感谢您提供的建议

稍微修改一下就解决了这个问题

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

这就成功了。

如果我添加这一行，那么手机浏览器屏幕将无法放大或缩小。此外，默认情况下，网页显示为放大。我不擅长这一点，但要缩放屏幕，您应该尝试使用最大比例和最小比例值。顺便说一下，您应该阅读本文：。当涉及到水平滚动时，尝试添加到主容器和容器溢出：隐藏。我认为你也应该避免在px的宽度。尝试使用百分比值。如果添加此行，则无法放大或缩小移动浏览器屏幕。此外，默认情况下，网页显示为放大。我不擅长这一点，但要缩放屏幕，您应该尝试使用最大比例和最小比例值。顺便说一下，您应该阅读本文：。当涉及到水平滚动时，尝试添加到主容器和容器溢出：隐藏。我认为你也应该避免在px的宽度。尝试使用百分比值。我还注意到一件事。如果我将主容器div的高度硬编码为1500px或更高，问题在某种程度上得到了解决。加载时不会显示滚动条。如果将iPhone旋转到横向模式，然后在纵向模式下查看，则会出现问题。然而，我不能保持高度硬编码。我还注意到一件事。如果我将主容器div的高度硬编码为1500px或更高，问题在某种程度上得到了解决。加载时不会显示滚动条。如果将iPhone旋转到横向模式，然后在纵向模式下查看，则会出现问题。然而，我不能保持高度硬编码。