这是我的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>虽然我的视口的元标记缩放到设备宽度,但此页面不适合屏幕:仍有白色边框(在我的Galaxy S3上).我希望它完全是红色的.
我该怎么做才能使这个页面完全适合我的屏幕？(以及大多数设备的屏幕)
我是移动开发的新手,谢谢
除了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 */
}