Question

我已经看过一些关于此的帖子，但它似乎没有帮助我在头部使用<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;
}

Answer 1

尝试设置身体元素的宽度和高度值

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

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

@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
   body { //values here }
}

Answer 2

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

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

'width：100％'指的是视口的100％宽度，即800px，所以一切都正常工作。

100％宽度似乎不适用于iOS

2 个答案: