手機全寬容器

夥計！我有下面的代碼網站：手機全寬容器

<html> 
    <head> 
     <!-- some code here --> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    </head> 
    <body> 
     <div class="screenFourth"> 
      <div class="container"> 
       <!-- a lot of tags --> 
      </div> 
     </div> 
    </body> 
</html>

所以問題是，如果我打開網站上的移動它在屏幕的右側的空白處。這裏是它的形象： Empty space on the right side

CSS代碼如下：

.screenFourth{ 
    background-image: url(...); 
    background-size: cover; 
    background-position: top; 
    min-height: 1380px; 
} 

@media screen and (max-width: 760px){ 
    .container{ width: 100%; margin: 0 auto; } 
}

我怎樣才能解決這個問題？謝謝！

來源

2017-07-24 tohhy

.screenFourth：100vw; – Gerard

你可以發佈圖片的網址嗎？ –

@VladoPandžić點擊「空白在右側」鏈接。 – tohhy

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
} 

.screenFourth{ 
    background-image: url(...); 
    background-size: cover; 
    background-position: top; 
    width: 100%; 
    min-height: 1380px; 
} 

@media screen and (max-width: 760px){ 
    .container{ width: 100vw; margin: 0; padding: 0; } 
}

將以下內容添加到您的CSS文件。我已將背景寬度設置爲100％，並將width: 100vw;添加到容器CSS。 vw是一個css單元，它設置相對於視口的寬度。我希望這個幫助。

還從HTML和Body標記中取出了餘量&填充。

編輯HTML

<html> 
    <head> 
     <!-- some code here --> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0"> 
    </head> 
    <body> 
     <div class="screenFourth"> 
      <div class="container"> 
       <!-- a lot of tags --> 
      </div> 
     </div> 
    </body> 
</html>

來源

2017-07-24 15:26:49

對不起，但它仍然是一樣的。沒有改變。 – tohhy

@tohhy對不起，我只是編輯了答案，你能再次檢查嗎 –

謝謝，但我什麼都沒做，它以某種方式工作。也許這是由於Chrome緩存。 – tohhy

手機全寬容器

回答

相關問題