jQuery Forum

Most high-resolution tablets have followed the lead of iPhone/iPad and adopted a scheme of using a device pixel ratio in the browser, typically 2.0 or 1.5.

This means that, for a device with a 2560x1600, it presents to the browser as 1530x800. However, by using CSS, it is possible to substitute images in double-resolution.

That is, it is still possible to use images in the full resolution, but the coordinate-system "grid" is based on 1/2 the real device resolution.

jQuery Mobile adapts to this, and should show correctly-sized elements while using full-resolution icons. (The icons are present by default for both pixel ratios).

I am unfamiliar with your particular tablet, but it sounds to me like you may have made some browser setting to defeat the default behavior, or else you are not using the proper viewport meta.

A tablet of that resolution that doesn't use a device pixel ratio in the browser would be essentially unusable for browsing the vast majority of websites, let alone use with jQuery Mobile. Nobody would buy such a product, that makes every website have tiny little graphics.

This is why I think you must have disturbed some default setting.

How does the jQuery Mobile demo site look on the browser? (Or your own app, if it possible to use it as a website outside of PhoneGap?)

I think this is what is tripping you up:

  target-densitydpi=device-dpi"

Just leave that out.

As well, you should not set both width and height. Just set width=device-width. jQuery Mobile is not designed to work correctly if you specify both width and height.

In other words, try  the STANDARD, RECOMMENDED viewport meta.

1. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, usr-scalable=no">

Why did you change this? I think you out-smarted yourself. Start with defaults. Then you can muck with them and back-off it it messes something up.

PhoneGap does not assume that you are using jQuery Mobile. That default is appropriate if you are designing your own images and CSS and want to use the full resolution of the device on a full-resolution grid.

I'm sure that if you dig deeper, and assuming there is some documentation in PhoneGap about specific use with jQuery Mobile, they will give you the same advice that I have.

Anyway, you should see that this has nothing to do with PhoneGap. Your pages are written in jQuery Mobile. PhoneGap doesn't get involved in presentation at all. It is the combination of your browser and your CSS and images that control this. They act the same whether you are using a webview or a browser.

I hadn't noticed what default PhoneGap gives you in template, because I (and presumably, most/all JQM Phonegap developers) don't use any part of the www directory provided by the template.