媒體查詢 - 僅適用於iPhone的Css風景

Question

是否只能在橫向模式下爲iPhone編寫css的方法相同？ 謝謝

Answer 1

你可以這樣做這

<meta name="viewport" content="width=device-width, 
    minimum-scale=1.0, maximum-scale=1.0"> 

這迫使iPhone渲染視口相同的設備寬度。

然後使用這個CSS瞄準風景模式，這是+320px寬

@media screen and (min-width: 321px){ 
    //styles 
} 

Answer 2

如果我理解正確的話，你想知道媒體查詢的目標像iPhone智能手機，只有當它保持水平，嘗試這樣的事情：

@media only screen and (min-width: 480px) and (max-width: 767px) { 
    /* styles go here */ 
    body { 

    } 
} 

Answer 3

是的，當然。檢查：http://www.w3.org/TR/css3-mediaqueries/#orientation

@media all and (orientation:portrait) { … } 
@media all and (orientation:landscape) { … } 

如果你想針對iPhone只有你有添加的分辨率或DPPX密度這些MQ。

Answer 4

實際上，如果你使用：

<meta name="viewport" content="width=device-width, 
minimum-scale=1.0, maximum-scale=1.0"> 

則防止用戶在任何時間，這可能會導致可用性問題放大。

我會推薦您使用：

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

在這種情況下，強制將顯示在您的網頁在它的原始的初始規模，這樣您就可以指定你的媒體查詢不同的佈局尺寸，如當你旋轉你的iPhone時，佈局將被調整大小：

@media only screen and (min-width: 480px) { 
    /* landscape mode */ 
} 

@media only screen and (max-width: 479px) { 
    /* portrait mode */ 
} 

而且用戶仍然可以捏住頁面進行縮放。

Answer 5

在這裏你可以找到所有媒體查詢

http://nmsdvid.com/snippets/