iPhone媒體查詢不指向手機樣式表

Question

我正在測試我的網站的移動版本並設置了新的mobile.css文件，並使用以下代碼重定向到它。 （style.css的是我的主要「桌面」 CSS）

<link rel="stylesheet" href="mobile.css" media="only screen and (max-device width:480px)"/> 

     <meta name="viewport" content="width=device-width"> 

     <link rel="stylesheet" href="css/style.css" media="screen" /> 

我在iPhone 5測試這一點，它根本不顯示我做的事情樣改變背景顏色等的CSS的移動版本測試它的工作，它只是顯示常規版本。

預先感謝您的幫助

Answer 1

您的媒體查詢引用的是iPhone4而不是iPhone5。你可以使用設備長寬比：

iPhone < 5: 
@media screen and (device-aspect-ratio: 2/3) {} 

iPhone 5: 
@media screen and (device-aspect-ratio: 40/71) {} 

iPad: 
@media screen and (device-aspect-ratio: 3/4) {} 

或者如果你想combinate你可以做這樣的事情：

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) { 
    /* iPhone only */ 
}