100％的宽度似乎不适用于iOS

问题描述：

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

站点引用是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; 
}

不，％不适用于iOS网页浏览/ Safari浏览器。不幸的是，你将不得不对它进行硬编码，并确保你指定了像素位置。 – 2013-02-19 16:59:29

谢谢，如果需要截取浏览器的全部宽度，可以推荐指定宽度值的内容吗？ – Greg 2013-02-19 17:09:40

这对我来说也是一个严重的问题，显然我必须动态检测浏览器宽度，然后将其注入代码中。％在iOS上从未为我工作过（即使通过objective-c webviews）。您可以使用phonegap插件来检测iOS（Safari）设备上浏览器的宽度。 – 2013-02-19 17:15:09

答

尝试为您的身体元素

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

另一种选择，可以帮助解决这一问题是使用@media类型，你可以用它来指定当CSS值设置宽度和高度值设备处于横向模式。

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

谢谢，但这似乎没有改变 – Greg 2013-02-19 17:07:54

答

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

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

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

100％的宽度似乎不适用于iOS

相关推荐