html - 移动渲染不会拉伸(stretch) 100%

Question

你好，在我的网站上，我有一个 100% 宽度的页眉/页脚包装器，上面有一个与其余部分不同的背景图像，但是当我在移动设备上访问该网站时，它只拉伸(stretch)了 90% 的宽度，我正在将站点转换为我最近开发的响应式网格系统，因此当前版本只会再运行几周，但是我宁愿修复它，任何人都知道这是怎么回事？网址:jp creative vision标题的 CSS

#header{
padding: 0;
height:60px;
width:100%;
background-image:url(../images/general/background_top.jpg);
-webkit-box-shadow: 0px 0px 50px 5px #000000;
-moz-box-shadow: 0px 0px 50px 5px #000000;
box-shadow: 0px 0px 50px 5px #000000;
}
    #nav{
        margin: 0 auto;
        padding-top:0;
        width:1000px;
    }
        #nav ul{
            float:right;
        }
        #nav li {
            display: inline-block;
        }
        #nav li a, #nav li a:visited {
            box-sizing: border-box;
            color:#FFFFFF;
            display: block;
            padding: .31em .60em;
            transition: border 1s ease-in-out;
            -moz-transition: border 1s ease-in-out;
            -webkit-transition: border 1s ease-in-out;
        }
        #nav li a:hover, #nav li a:active, #nav li a:focus {
            border-bottom: solid 10px #336699;

        }
        #nav ul:last-child{
            margin-right:0px;
            padding-right:0px;
        }

有人知道我的问题是什么吗？感谢您的帮助:)

编辑，问题是页眉和页脚中的包装器应该拉伸(stretch) 100%，但在移动设备上只能拉伸(stretch) 90%。

Answer 1

首先做一个

*{
margin:0px;
padding:0px;
}

在你的样式表中。 那么这就是最小宽度为 900px 的媒体查询的样式

media="screen and (min-width: 900px)"

尝试处理更小的宽度。

并且还为全局样式的正文做了一个width:100%。然后继续使用媒体样式。您也可以在调整浏览器大小时看到效果 :) 尝试测试大量工作要做。