Question

我正在测试基本布局：

<html>
    <head>
         <link type="text/css" rel="stylesheet" href="./../public/css/main.css"> 
    </head>
    <body>
    </body> 
</html>

并且有身体元素的样式

 background-color: rgb(255, 0, 0);
 color: rgb(51, 51, 51);
 display: block;
 font-family: 'Segoe UI', Ubuntu, Roboto, 'Helvetica Neue', 'Open Sans', Arial, sans-serif;
 font-size: 14px;
 height: 1091px;
 line-height: 20px;
 margin-bottom: 0px;
 margin-left: 0px;
 margin-right: 0px;
 margin-top: 0px;
 min-height: 100%;
 min-width: 1024px;
 padding-bottom: 0px;
 padding-left: 0px;
 padding-right: 0px;
 padding-top: 0px;
 width: 1024px;

问题是我确信体宽会缩放并适合手机尺寸。但是当我在iPhone 3GS上测试时，水平滚动条出现了。为什么宽度没有缩放？

Answer 1

将以下内容添加到您的头脑中：

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

Answer 2

将以下元标记添加到文档的开头：

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

Answer 3

这是因为你正在定义：

 min-width: 1024px;
 width: 1024px;

你应该删除两者，并定义元：

<meta name="viewport" content="width=device-width">

CSS正文宽度未缩放到手机宽度

3 个答案: