HTML body沒有在移動設備上填充完整寬度

Question

如果我在普通瀏覽器中打開我的（GWT）頁面，一切工作正常。身體佔據整個寬度，內容很好地居中。但是，如果我在手機上嘗試這種方式，身體並不佔據整個寬度，因此內容不居中。

我找不出爲什麼它會這樣顯示。另外，爲body和html標籤添加100％寬度並不能解決問題。

有沒有辦法在移動設備上正常工作？

頁面下都可以達到：http://www.vegantastic.de/

Answer 1

這是推動我瘋了，我只是解決它通過添加position:fixed對身體

Answer 2

我可以看到，這背後的問題，這個問題解決了，但我只是遇到了同樣的問題，因爲評論中聲明的滾動禁用，我的案例中的答案無法應用，而對身體的任何其他樣式修改似乎都會影響結果。

經過實驗後，我發現這是由於我的頁面裏面有一個被旋轉的元素造成的，它的高度成爲了移動設備的障礙，因爲它靠近了機體的右端。

所以我想補充這個答案，如果有人和我一樣，發現通過谷歌這樣的問題：

這個問題可以由許多因素造成的，你可能要調查，如果您的組件的寬度的不成爲移動視圖的問題。頁面上可能有一個div太長，或者頁面上有一個旋轉的頁面，頁邊空白。

Answer 3

在我的情況下，body（和html）元素在從display: flex;組中刪除屬性後恢復正常。經過我的調查後，我發現每個具有自動計算寬度的元素都必須位於具有高度和寬度的元素中，並將所有子元素一直包裝到身體中。在向父元素添加一些overflow:auto; position:relative;之後，人體可以正確縮放顯示flex並嵌套在顯示器flex中。

@import '../../variables.scss'; 
:host { 
    overflow: auto; // added this line 
} 

.top-bar { 
    display: flex; 
    flex-direction: row; 
    padding: 10px; 
    box-shadow: $shadow; 
    position: relative; 
    .search-item { 
     flex: 1; 
     margin: 0 1em; 
     display: flex; 
     flex-direction: row; 
     position: relative; 
     input { 
      margin: 0; 
      border-top-right-radius: 0px; 
      border-bottom-right-radius: 0px; 
      border-right-width: 0px; 
      flex: 1; 
      width: 1px; 
     } 
     button { 
      margin: 0; 
      border-top-left-radius: 0px; 
      border-bottom-left-radius: 0px; 
      border: 1px solid #ccc; 
      border-left-width: 0px; 
      box-shadow: inset $shadow; 
     } 
    } 
    button.icon-only { 
     border: none; 
     background-color: transparent; 
    } 
} 

菜單看起來像這樣：

前：

後：

Answer 4

這可能是因爲您的網頁上有很長的字。使用正確的視口元標記後：

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

我嘗試了這一點，通過將該文本段落元素中，一些空的HTML文檔中：

<p>Here I have a text, and I am going to use a very long, and not-imaginary word (oh it's real) inside. Without some word-breaking CSS, the result will break the screen on smaller devices: Pseudopseudohypoparathyroidism</p>

發生了什麼事當我在沒有手機模擬器的情況下縮小屏幕尺寸時：

發生了什麼事，當我用手機模擬器降低了屏幕尺寸：

相當的差異。我的提示：使用下面的CSS屬性：

p { 
    word-break: break-word; 
}