多余的白色space，页面宽度

Question

新来的，如果我发错地方了请告诉我。

我正在制作一个新网站，有点业余爱好，在在线论坛和 Google 的帮助下自我思考 :)

我遇到的问题是，我以前用得不多 CSS，但看来这是设置样式的最佳方式。在移动设备上访问页面时，它会被缩小，并且在右侧下方有一个巨大的白色 space。我已经在网上查看了几篇文章，但无法接缝以摆脱这种多余的东西 space。

这是文件的第一部分，显示这个..

    <style type="text/css">
html, body {
    width: 400px;
    margin: 0;
    padding: 0;
    text-align: center;
    overflow-x: hidden;
}

main {
    posistion: relative;
    height: auto;
    width: 400px;
    margin: 0;
    padding: 0;
    display: block;
    text-align: center;
    z-index: 0;
}

li a {
    display: block;
    width:80%;
    background:#ddd;
    padding: 0% 0%;
    font-size: 30px;
    text-decoration: none;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}

    #menu {
       position: absolute;
       margin-top: 15px;
       margin-left: 15px;
        width:1.4em;
        display: block;
        background:#ddd;
        font-size:1.35em;
        text-align: center;
        z-index: 1000;
    }

    #nav {
       position: absolute;
       margin-top: 44px;
       margin-left: 15px;
        width: 135px;
        display: block;
        background:#ddd;
        font-size:1.35em;
        text-align: left;
        z-index: 1000;
    }

    #nav.js {
        display: none;
    }

    ul {
       margin-left: 0px;
        width:150px;
        list-style: none;
        z-index: 1000;
    }

    li {
        margin-left: 0px;
        width:auto;
        border-right:none;
        z-index:1000;
    }
</style>

Answer 1

大多数浏览器会调整页面大小以适应，但您可以像这样使用 META 标记来防止这种情况。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

多余的白色space，页面宽度

Excess white space, page width

html

css

stylesheet

width