HTML/正文宽度不适合 100% 设备屏幕

Question

我正在尝试以响应式样式调整布局的主体，但是当我转到移动布局时，尺寸与屏幕的 px 保持一致，但并非在所有移动屏幕上都正确。看看底部的图片，手机大小是一，蓝色区域说的是空间不一样。

我在这里看到了一些类似的问题并尝试了所有解决方案，但仍然无法正常工作。

来自另一个问题：

html, body {
/*font-size: 40px;*/
margin:0; /* remove default margin */
padding:0; /* remove default padding */
width:100%; /* take full browser width */
height:100%; /* take full browser height*/
}

/*(set the full width window [width = device-width])*/

.content{
border-style: outset;
border-width: 3px;
border-radius: 7px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0px 0px 40px 3px rgba(199,191,199,1);
-moz-box-shadow: 0px 0px 40px 3px rgba(199,191,199,1);
box-shadow: 0px 0px 40px 3px rgba(199,191,199,1);
max-width: 70%;
margin: 1% auto;
background-color: #F6F6F6;
}

Here the Layout Error

Answer 1

尝试申请

width: 100vw;

而不是

width: 100%;

100vw 表示元素的宽度必须是窗口宽度的 100%。我不确定这个解决方案在这种情况下是否正确，但你必须尝试。

Answer 2

只是猜测，但您没有关闭html, body { 标签

Answer 3

对我来说，问题在于媒体查询：

属性“字体大小”

字母和单词比她的容器大，自行调整递减

Answer 4

您忘记关闭 html, body 标记，所以在其末尾添加一个 }。

另外：由于您使用的是 chrome 的开发工具，因此您可能需要在切换设备后刷新页面。例如，对我来说默认是iphone 5，但是当我切换到iphone 6时，布局就搞砸了，就像放大了一样。所以我只需双击右侧的“切换设备模式”即可重新启动设备模式，当它正确显示时，它以 iphone 6 作为默认设备启动。