Question

在放大手机时，如何防止我的网页（或我的div）内容超出左侧和右侧的屏幕视图？例如，看看我上传的这个页面：

http://postman-canary-31048.bitballoon.com

我尝试使用Div来防止内容超出页面浏览量，它在PC上运行得很好（尝试从桌面计算机放大和缩小，看看内容是如何保持在屏幕视图中的在左侧和右侧）但是当我尝试从移动设备（我的示例中为iPhone）缩放页面时，当我缩放时，文本会在左侧和右侧的屏幕视图中显示。

我该怎样防止这种情况？我想要观看我的页面所需的唯一滚动将是＆amp;我不希望我的内容（文字，图片......）超出双方的范围。

（请使用HTML和CSS，不使用Java Script）

谢谢！

Answer 1

包括

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

在文件的<head>

Answer 2

我更新了我的代码，它就在这里：

http://fireman-suppression-84203.bitballoon.com

我添加了

行

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

但它没有帮助，放大iPhone仍然导致文本在左侧和右侧溢出。

以下是完整代码：

<html>
   <head>
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <style>
        div {
        width:85%;
        margin: auto;
        border: 3px solid #73AD21;
        }
       </style>
 </head>
 <body>
    <div>Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... 
    </div>
    <br>
  </body>
</html>

在放大手机时如何防止div的内容超出屏幕视图？

2 个答案: