手機版全寬100％，刪除空間右側

我試圖將container全高和邊框線樣式化，在pc版本中沒問題，但是在iPhone上測試，右側有一點空間（10px）。
但只有在垂直模式下才會看到這種情況發生，旋轉到水平即可。手機版全寬100％，刪除空間右側

爲什麼？如何解決它？

UPDATE
我試過添加盒子大小：邊框不工作。
而現在我使用overflow: hidden（Responsive website on iPhone - unwanted white space on rotate from landscape to portrait）不讓用戶滾動查看空白區域，但container邊界線和content之間的空白，右側較小。所以我設置了大於左邊的contentmargin-right，使它看起來仍然像中心一樣。
但我想知道爲什麼，並找到完美的方式

是否使用元標記是錯誤的相關？如果刪除元標記它是好的垂直和水平模式

html, body { 
    width: 100%; 
    height: 100%; 
} 
.container { 
    width: 100%; 
    min-height: 100%; 
    border: 10px solid #000000; 
} 
.content { 
    width: 100%; 
    margin: 0 auto; 
}

HTML

<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="content"></div> 
    </dvi> 
    </body> 
</html>

來源

2014-09-23 user1775888

您的容器是100％的寬度，因此有一個邊框，因此有點小於100％的寬度。使用'box-sizing：border-box;' – Leeish 2014-09-23 22:35:39

即使在個人電腦上也不會有問題，因爲UA會在''上應用一個'margin'，還會計算'.container'的'height' /'width'由於增加了邊框，因此超過了''的可用空間。試試這個：http://jsbin.com/nocewi/1/edit – 2014-09-23 22:37:42

謝謝回覆添加框大小和設置保證金0沒有任何變化，不工作...我仍然可以滾動到右側看空間 – user1775888 2014-09-23 22:50:26

你的容器具有100％的寬度+ 1px的每一側上邊界因而使得大於100％。

嘗試以下解決方法之一：

.container{ 
    box-sizing: border-box; 
} 


.container{ 
    width: calc(100% - 2px); 
} 


.container{ 
    max-width: 100%; 
}

來源

2014-09-23 22:43:32

感謝您的回覆，我試過每一個但不工作。。我仍然可以滾動到右邊看空間 – user1775888 2014-09-23 22:53:57

好的嘗試添加這個：'.container {overflow：hidden;}' – 2014-09-23 23:53:34

我以前試過，但空白仍然在那裏只是隱藏所以如果容器內的內容是保證金： 0自動它仍然不是中心。內容與輪廓右側之間的空間較小。我也嘗試過移動內容邊界 - 正確的容器邊界線寬度，但我試圖找到解決這個問題的最佳方法，並知道爲什麼？ – user1775888 2014-09-24 09:20:25

的Html

<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> 
    </head> 
    <body> 
     <div id="solution" class="container"> 
      <div class="content"></div> 
     </div> 
    </body> 
    </html>

CSS

html, body { 
    width: auto; 
    height: 100%; 
} 

.content { 
    width: 100%; 
    margin: 0 auto; 
    background:#000; 
    height:200px; 
} 

.container { 
    width: 100%; 
    padding: 10px; 
    border: 30px solid #999; 
} 

#solution { 
    box-sizing: border-box; 
}

檢查下面撥弄http://jsfiddle.net/manjunath_siddappa/53grcpdv/，

我希望它可以幫助你。

來源

2014-09-24 11:34:57

手機版全寬100％，刪除空間右側

回答

相關問題