如何使用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设备上修复视口缩放

回答

相关问题