Question

这是我的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上）。我希望它完全是红色的。

我需要做些什么才能让这个页面完全适合我的屏幕？（以及大多数设备的屏幕）

我是移动开发的新手，谢谢

Answer 1

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

Answer 2

试试这个

body {
margin:0;
padding:0;
}

Answer 3

您将.screen的宽度设置为8em，将其更新为100%：

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

您也可能（除非您使用CSS重置）需要移除margin上的padding和body：

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

HTML页面不适合移动设备屏幕

3 个答案: