HTML網頁不適合移動設備屏幕

這裏是我的HTML：HTML網頁不適合移動設備屏幕

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, user-scalable=no"> 
    <title>Test</title> 
    <style type="text/css"> 
     body { 
      font-size: 40px; 
     } 

     .screen { 
      font-size: 0.5em; 
      margin: 0; 
      background-color: red; 
      position: absolute; 
      width: 8em; 
      height: 19em; 
      left: 0; 
      top: 0; 
     } 

     .screen .main { 
      width: 100%; 
      height: 100%; 
     } 
    </style> 
</head> 
<body> 
    <div class="screen"> 
     <div class="main">Ut enim benefici liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus.</div> 
    </div> 
</body> 
</html>

雖然我對縮放到設備寬度視meta標籤，這個頁面不適合屏幕：仍然存在白色邊界（在我的Galaxy S3上）。我希望它完全是紅色的。

爲了使這個頁面完全適合我的屏幕，我該怎麼做？（和大多數設備的屏幕）

我在移動開發總新手，謝謝

來源

2014-01-16 Harkonnen

除了BenM的回答，設置這個在你的CSS從瀏覽器

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*/ 
}

如此完整的CSS應該刪除默認的樣式：

.screen { 
       font-size: 0.5em; 
       margin: 0; 
       background-color: red; 
       position: absolute; 
       width: 100% /* BenM mentioned this in answer*/ 
       height: 100%; /* take full browser height */ 
       left: 0; 
       top: 0; 
      } 

    .screen .main { 
       width: 100%; /* <--now this takes full browser dimension */ 
       height: 100%; /* <--now this takes full browser dimension */ 
      }

來源

2014-01-16 13:25:08 NoobEditor

非常好，謝謝 – Harkonnen

您設置的.screen到8em寬度，更新到100%：

.screen { 
    font-size: 0.5em; 
    margin: 0; 
    background-color: red; 
    position: absolute; 
    width: 100%; 
    height: 19em; 
    left: 0; 
    top: 0; 
}

你」還-111（可能，除非您使用的是CSS復位）需要刪除margin和padding在body：

body { 
    font-size: 40px; 
    margin: 0; 
    padding: 0; 
}

來源

2014-01-16 13:24:09 BenM

試試這個

body { 
margin:0; 
padding:0; 
}

來源

2014-01-16 13:24:49

+1落後19秒！ :) – NoobEditor

HTML網頁不適合移動設備屏幕

回答

相關問題