Question

你好我的网站我有一个100％宽度的页眉/页脚包装，其上有一个不同的bg图像到其余部分，但是当我在移动设备上访问该网站时它只延伸了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;
        }

任何人都知道我的问题是什么？谢谢你的帮助：）

编辑，问题是页眉和页脚中的包装器应该伸展100％，只能在手机上执行90％。

Answer 1

首先做一个

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

在你的样式表中

。然后，这是您使用最小宽度为900px的媒体查询的样式

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

尝试处理较小的宽度。

并且还为全局风格的身体做width:100%。然后继续进行媒体风格。您可以在调整浏览器大小时看到效果:)尝试测试很多工作要做。

Answer 2

我一直在讨论这个问题太多了。使用此元代码可阻止移动设备缩小。希望这可以帮助。

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

我一直在浏览你的网站btw，给访问者快速发送消息真的太多了。使用更多图像，因此用户必须尽可能少地做。

移动呈现不会延伸100％

2 个答案: