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

【问题标题】：HTML page doesn't fit mobile device screenHTML 页面不适合移动设备屏幕
【发布时间】：2014-01-16 13:21:55
【问题描述】：

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

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

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

【问题讨论】：

标签： html css mobile

【解决方案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  */
            }

【讨论】：

【解决方案2】：

试试这个

body {
margin:0;
padding:0;
}

【讨论】：

【解决方案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 重置）需要删除 body 上的 margin 和 padding：

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

【讨论】：