2

我已经看过一些关于此的帖子，但它似乎对我<meta name="viewport" content="width=device-width,initial-scale=1" />在头部使用的问题没有帮助，但它不能解决页眉和页脚不跨越视口宽度的问题。主要内容区域似乎工作。

参考网站是brendanfenn.com

CSS如下。非常感谢任何见解。

#wrapper {
    margin: 0 auto;
    position: relative;
}


#header_container{
    background-image: url(http://www.brendanfenn.com/wp-content/uploads/2013/02/headerBG1.jpg);
    width: 100%;    
}

#header {
    width:964px;
    height:150px;
    margin: 0 auto;
}

#content {
    width:964px;
    background: url(images/border-bg.gif) repeat-y top left;
    z-index: 1;
    margin: 0 auto;

}

#content #left-col {
    width:615px;
    float:left;
    padding: 20px 11px 20px 10px;
    z-index: 1;
}

#content #right-col {
    width:307px;    
    padding:3px;
    float:left;
    z-index: 1;
}


#footer {
    width:100%;
    background: #2a2006;    
    margin: 30px 0 auto;
}
4

2 回答 2

0 
<meta name="viewport" content="width=device-width,initial-scale=0.4">

（来自链接的文件）是你的问题。这将您的视口设置为 800 像素宽（设备宽度 * 1/0.4）。

'width:100%' 是指视口的 100% 宽度，即 800 像素，所以一切正常。

于 2013-02-19T21:06:13.047 回答
0

尝试为你的 body 元素设置宽度和高度值

body { width: 100%; min-height: 100% }

另一个可能有助于解决该问题的选项是使用 @media 类型，您可以使用它来指定设备处于横向模式时的 css 值。

@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
   body { //values here }
}
于 2013-02-19T17:01:55.873 回答