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; 
}

來源

2013-02-19 Greg

不，％不適用於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 } 
}

來源

2013-02-19 17:01:55 theaccordance

謝謝，但這似乎沒有改變 – 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，所以一切正常。

來源

2013-02-19 21:06:13 hooleyhoop

100％的寬度似乎不適用於iOS

回答

相關問題