I am developing a PhoneGap based application using jQueryMobile which will run on Nexus10 (display resolution is 2560x1600 300ppi) and basically every jQuery elements like buttons, dialog / pop-up buttons are really small. All jmobilequery scripts are installed locally in assets directory since device will be used in off-line mode.
Please advice what can be done in order to enlarge the controls.
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.
The sites are displayed correctly, but because I am using PhoneGapframework , it might be that PhoneGap itself changes the webview
settings of the container. I will try to find out where can it be
Demo site looks just OK, there is no possibility to see the website since it stored in assets directory of the application.
I have the following definition in the main page of the application: <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
When I change it to <meta name="viewport" content="user-scalable=yes, initial-scale=1.5, maximum-scale=1.5, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
it looks much better, but I am not sure this is the correct solution
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.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic