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网页不适合移动设备屏幕

回答

相关问题