iOS基於媒體查詢加載錯誤樣式表

我正在使用Phonegap（1.4.1）/ JS（jQuery Mobile 1.0）/ HTML/CSS的移動應用程序。我使用媒體查詢來加載不同的屏幕尺寸合適的CSS文件，所以我有以下的代碼加載樣式表：iOS基於媒體查詢加載錯誤樣式表

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
<link rel="stylesheet" media="screen and (min-width: 720px)" href="../css/XL_global.css" /> 
<link rel="stylesheet" media="screen and (min-width: 480px) and (max-width: 719px)" href="../css/L_global.css" /> 
<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 479px) " href="../css/M_global.css" /> 
<link rel="stylesheet" media="screen and (max-width: 319px) " href="../css/S_global.css" />

我的問題：我的iPhone 4S，其中有一個屏幕分辨率960x640像素，加載的樣式表是M_global.css。我使用的是iOS 5.1，據我所知，iOS上的UIWebView至少在iOS 5+上支持媒體查詢（畢竟它會加載其中一種樣式表）。

我已經使用min-device-width/max-device-width和-webkit-min-device-width/-webkit-max-device-width了，只是爲了看看它是否有所作爲，但它沒有。我也曾嘗試在上述各種組合的前面添加單詞「only」（即media =「only screen and（min-width：480px）and（max-width：719px）」），但那樣做並沒有「也沒有幫助（真的沒有意外）。

我試着將M_global.css文件的查詢條件設置爲最小寬度：0和最大寬度：0只是爲了查看它是否加載了特定的樣式表，無論如何，但它沒有加載任何CSS。

如果這是一個我爲自己製作的應用程序，爲了好玩，我會放棄它，只是接受它加載了錯誤的CSS文件並盡力而爲。但是，這不適合我，我不是那個會維護這個應用程序的人，所以它必須是正確的。

有沒有人有這種在iOS的古怪行爲的經驗，並找出瞭解決辦法？

來源

2012-05-07 Joe Dyndale

您需要測試的規模，像這樣：

media="-webkit-min-device-pixel-ratio: 2"

來源

2012-05-07 15:37:24

這讓我走向了正確的方向 - 謝謝！ –

無論什麼實際的像素尺寸爲您的手機，你需要認識到CSS是看着「CSS設備像素」，這是完全不同的。

你的樣式表仍然註冊你的iphone是320x480。您的像素密度較高，但您需要考慮「CSS像素」。

即使高分辨率設備也報告CSS像素值較低。去谷歌上查詢。

來源

2014-10-01 21:43:24 sitesbyjoe

iOS基於媒體查詢加載錯誤樣式表

回答

相關問題