Question

新来的，如果我在错误的地方张贴，请告诉我。

我正在建立一个新的网站，有点兴趣，在网上论坛和谷歌的帮助下自我思考：）

我遇到的问题是，我之前没有使用太多的CSS，但看起来这是最好的风格。在访问移动设备上的页面时，它会直接缩放，并在右侧有一个巨大的空白区域。我已经在线查看了几个帖子，但是无法通过缝合来摆脱这个多余的空间。

以下是显示此内容的文件的第一部分..

    <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"/>

多余的空白区域，页面宽度

1 个答案: