HTML/正文寬度不適合 100% 設備屏幕

Question

我正在嘗試以響應式樣式適應我的布局主體，但是當我轉到移動布局時，尺寸保持在屏幕的像素上，但在所有移動屏幕上都不正確。 看看底部的圖片，手機尺寸是一個，藍色區域說的是空間不同。

我在這里看到了一些這樣的問題，並嘗試了所有這些解決方案，但仍然無法正常工作。

從另一個問題：

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;
}

這里的布局錯誤

Answer 1

嘗試申請

width: 100vw;

而不是

width: 100%;

100vw表示元素的寬度必須是window 寬度的 100% 。 在這種情況下，我不確定此解決方案是否正確，但您必須嘗試。

Answer 2

只是猜測，但您沒有關閉html, body {標簽

Answer 3

對我來說，問題出在媒體查詢中：

屬性“字體大小”

字母和單詞比她的容器大，減少自行調整

Answer 4

您忘記關閉 html, body 標記，因此在其末尾添加一個 }。

另外：因為您使用的是 chrome 的開發工具，所以您可能需要在切換設備后刷新頁面。 例如，對我來說，默認是 iphone 5，但是當我切換到 iphone 6 時，布局被搞砸了，幾乎就像放大一樣。所以我要做的就是雙擊右側的“切換設備模式”重新啟動設備模式，當它正確顯示時，它以 iphone 6 作為默認設備啟動。