正確的媒體查詢語法CSS iPhone

我能夠正確地格式化網站使用在線resonsive設計測試儀和CSS聲明設備，例如，@media only screen and (max-width: 480px) {，但在實際的iPhone測試的網站時，這些CSS聲明沒有被由瀏覽器計算。正確的媒體查詢語法CSS iPhone

我也試過max-device-width並設置初始比例爲<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>.我也嘗試了前面的聲明沒有初始比例設置。

我也試過：@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {

另外：only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-pixel-ratio : 2) {

的這一切一直致力於針對iphone呢。我錯過了什麼成功瞄準iPhone 3/4？

來源

2012-03-29 Nick B

嘗試把媒體查詢在您的樣式表的底部，我知道我之前有同樣的問題，並且解決它，奇怪的是。您也可以使用此類工具測試查詢：http://quirktools.com/screenfly/ – 2012-03-29 22:58:21

我已成功能夠針對iphone和使用CSS聲明設備：

@media all and (max-width: 480px) { 
    /* put iphone css formatting here */ 
}

例如。感謝您的貢獻。

來源

2012-04-14 00:27:39

呃......我完全不相信媒體的質疑做這個任務。

他們都失敗了我太多的時間。如果你沒有任何運氣，去檢測設備JS或服務器端解決方案。也許去這個js：

var pixelRat = window.devicePixelRatio; 
var screenWidth = screen.width; 

//iPhone Retina Display 
if (pixelRat >= 2) 
{ 
    $('meta[name=viewport]').attr('content','initial-scale=.5, maximum-scale=.5'); 
    $('link[name=mainstyle').attr('href', 'css/iphoneHD.css'); 
} 
//iPhone 3gs, 3g, Edge 
else if (pixelRat < 2 && screenWidth == 320) 
{ 
    $('meta[name=viewport]').attr('content','width=device-width, minimum-scale=1.0, maximum-scale=1.0'); 
    $('link[name=mainstyle]').attr('href', 'css/iphone.css'); 
} 
//iPad 1 and 2 
else if (pixelRat < 2 && screenWidth == 768) 
{ 
    $('meta[name=viewport]').attr('content','width=device-width, minimum-scale=1.0, maximum-scale=1.0'); 
    $('link[name=mainstyle]').attr('href', 'css/mobile.css'); 
    $('link[name=loginpadstyle]').attr('href', 'css/loginpad.css'); 
} 
//Mac OS X, Windows, Etc. 
else 
{ 
    $('meta[name=viewport]').attr('content','width=device-width, minimum-scale=1.0, maximum-scale=1.0'); 
    $('link[name=mainstyle').attr('href', 'css/style.css'); 
}

來源

2012-03-29 22:54:01

正確的媒體查詢語法CSS iPhone

回答

相關問題