iPhone 6媒體查詢

我無法獲取橫向方向的iPhone 6+的媒體查詢以正常運行。肖像工作得很好。我爲iPhone 5使用@media only screen and (min-width:320px) and (max-width:568px) and (orientation: landscape) {}，iPhone 6使用@media only screen and (min-width:414px) and (max-width:736px) and (orientation: landscape) {} - 但之後iPhone 5更改爲我爲iPhone 6+編寫的內容。而且iPhone 6+在我將736px寬度更改爲800px寬度之前不會改變。iPhone 6媒體查詢

我已經嘗試了很多不同的東西在堆棧溢出這裏找到，但沒有任何工作。由於某些原因，min/max-DEVICE-width對我無效。

我使用Google Chrome的響應式網頁設計測試器進行測試（我還沒有iPhone 6+測試）。而我在<head>標記中有<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">。

請幫忙！

來源

2016-11-02 soulitude

媒體查詢爲iPhone 6

/* ----------- iPhone 6 ----------- */ 

/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (-webkit-min-device-pixel-ratio: 2) { 

} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: portrait) { 

} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: landscape) { 

}

這裏你可以找到偉大的教程吧https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

來源

2016-11-02 12:10:36 Rahul

不幸的是，我寫的，（分設備寬度）不爲我工作的。什麼都沒發生。 – soulitude

@soulitude上面的代碼已經過很好的測試，我們所有人都用它來定位iphone 6，看看它是否適用於您打開的鍍鉻按鍵'F12'，然後按Ctrl + shift + m並選擇iphone 6並刷新您的頁面 – Rahul

iPhone 6媒體查詢

回答

相關問題