PhoneGap，jQuery Mobile和Retina Display

我正在使用jQuery Mobile的PhoneGap應用程序。目前我只在iPhone和iPhone視網膜模擬器測試。PhoneGap，jQuery Mobile和Retina Display

當我在Retina模式下打開應用程序時，應用程序的密度是正確的，但是頁面的尺寸只有屏幕尺寸的一半。

我自己的猜測是，jQuery Mobile的css並沒有擴大寬度和高度，但我一直無法找到任何關於此的信息。

我的HTML有這樣的：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

然後我執行此Javascript：

if ($.mobile.media("screen and (min-width: 320px)")) { 
    if ($.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)")) { 
     $('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5'); 
    } 
}

我缺少什麼？

來源

2011-09-25 kfuglsang

我想你猜對了。

看看JQM.css文件。

它只包括高分辨率/低分辨率圖標的媒體查詢。在視網膜和非視網膜設備上，其他一切都「按原樣」，因此JQM僅支持圖標大小的視網膜。

通過指定initial-scale=.5, maximum-scale=.5, minimum-scale=.5您將所有內容鎖定在50％。所以有你的不可擴展的半頁。

爲視網膜（「高端」）設備量身定製越多，標準瀏覽器（特別是「低端」，如IE7）就會遇到的麻煩越多。例如，檢查IE7中的JQM iconsprite定位 - 如果您沒有包含像respond.js這樣的腳本來支持媒體查詢，則圖標將處於偏離位置。

我認爲目前沒有足夠的視網膜設備來保證JQM提供跨瀏覽器視網膜和非視網膜解決方案。

我找到了一些不錯的信息here。我還做了一個僅限於IE7的CSS-iOS tab-bar。

檢查我的插件中需要的CSS，使圖標和漸變背景在所有瀏覽器上都看起來不錯，以及爲IE7 + 8量身定製的額外CSS數量。一個視網膜/非視網膜JQM.css文件將是很好，但很難下載:-)

來源

2011-10-11 06:06:58 frequent

-2

在你的情況下，你必須只針對圖像，而不是整個視口。圖像必須比正常顯示縮小一半。

來源

2012-12-14 22:05:13 benchaaben

請給出示例代碼來支持您的問題。 – mccannf

你的答案很難理解 –

PhoneGap，jQuery Mobile和Retina Display

回答

相關問題