logo标签列表

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

htmlcssmobile
5

这是我的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上仍然存在白色边框。我希望它完全变成红色。
为了使这个页面完全适合我的屏幕（以及大多数设备的屏幕），我需要做些什么？
我是一个移动开发的新手，谢谢。
3个回答
8

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

试试这个

body {
margin:0;
padding:0;
}
0

你将 .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;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接