如何使用JQuery Mobile在Android HDPI設備上修復視口縮放

我發現JQuery Mobile頁面在MDPI設備（如G1）上看起來不錯，但在HDPI設備（如Samsung Galaxy S）上看起來非常小。如何使用JQuery Mobile在Android HDPI設備上修復視口縮放

在這裏從Android模擬器的圖像與分辨率320x480的分辨率和160 dpi的：

mdpi

這裏圖像從Android模擬器用480x800的分辨率和240 dpi的：

hdpi

要查看比例失調比較具有原生Android界面（時鐘）大小的JQuery文本大小。

編輯：截圖與下列視口設置抽放：

<meta name="viewport" content="initial-scale=1, width=device-width, target-densitydpi=device-dpi"/>

來源

2011-12-26 micred

保持整個Android的屏幕尺寸之間的一致性的最有效方法設備將更改加載您（Web）應用程序的WebView的縮放級別。它不需要在HTML級別進行代碼更改。

public class YourApp extends DroidGap { 
    /** Called when the activity is first created. */ 

    // declare the original size of the iPad app 
    protected float ORIG_APP_W = 320; 
    protected float ORIG_APP_H = 480; 

    @Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 

     super.loadUrl("file:///android_asset/www/index.html", 3000); 

     // get actual screen size 
     Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); 
     int width = display.getWidth(); 
     int height = display.getHeight(); 

     // calculate target scale (only dealing with portrait orientation) 
     double globalScale = Math.ceil((width/ORIG_APP_W) * 100); 

     // make sure we're all good 
     Log.v(TAG, "ORIG_APP_W" + " = " + ORIG_APP_W); 
     Log.v(TAG, "ORIG_APP_H" + " = " + ORIG_APP_H); 
     Log.v(TAG, "width" + " = " + width); 
     Log.v(TAG, "this.appView.getMeasuredHeight() = " + height); 
     Log.v(TAG, "globalScale = " + globalScale); 
     Log.v(TAG, "this.appView.getScale() index=" + this.appView.getScale()); 

     // set the scale 
     this.appView.setInitialScale((int)globalScale); 
    } 
}

來源

2012-03-23 08:51:18 micred

沒錯，決議以不跨越你提到，對設備的比例？

即。 320:480與480:800不一樣

該設備已按比例放大了應用程序的寬度和高度，這會在高度組件中留下空白空間。

因此，與jQuery無關，只是您的應用需要設計增強來支持高端設備。

我不知道你的要求是什麼，但在這裏我就是這樣做來解決這個我的應用程序：

介紹有用的內容，填補了高度的高分辨率設備。要在代碼級別解釋，我有一個div內的附加內容與編號moreContentForHighEndDevices，並使用CSS媒體查詢有條件地顯示它，象下面這樣：

#moreContentForHighEndDevices { 
    display:none; 
} 

@media screen and (-webkit-device-pixel-ratio: 1.5) { 
    #moreContentForHighEndDevices { 
     display: block; 
    } 
}

來源

2012-02-24 05:37:32

從JQM版本1.1黑客縮放級別不再工作，因爲縮放是由JQM禁用。

頁面元[名= '視口']的內容，後活動被啓動並且第一頁被加載：

初始值初始規模= 1個

JQM 1.0.1 initial-scale = 1

JQM 1.1。0初始規模= 1，最大規模= 1，用戶可擴展=沒有

所以解決方案是因爲它防止元[名=「視口」]的內容，除去densitydpi =設備dpi的由android執行的「本地縮放」（請參閱http://developer.android.com/guide/webapps/targeting.html的詳細說明，定義視口目標密度部分）。

來源

2012-05-22 12:07:50 polarfish

如何使用JQuery Mobile在Android HDPI設備上修復視口縮放

回答

相關問題