Bigger app with PhoneGap + Bootstrap on Google Nexus

[trejde...@gmail.com]

Google Nexus phone offers enormous (as for me) screen resolution and all my mobile applications build PhoneGap looks just tiny. For example, when testing application on desktop computer, everything is fine, but after compiling it and installing it on Google Nexus phone, buttons becomes tiny and text is nearly unreadable.

I'm using Twitter Bootstrap, but I fear that I will get similar results on any other framework on this phone.

Mobile versions of webpages, when displayed in Mobile Chrome, easily adapts and are usable as on desktop computer or any other device. Only PhoneGap's applications looks so tiny.

Is there any easy workaround for this problem?

[Shazron]

PhoneGap does not use the Chrome browser, but the WebView component. My guess is your layout does not take into account the pixel ratio for high dpi displays. Search for "webkit-min-device-pixel-ratio" on Google, there should be lots of articles

--
-- You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
 
To compile in the cloud, check out build.phonegap.com
---
You received this message because you are subscribed to the Google Groups "phonegap" group.
To unsubscribe from this group and stop receiving emails from it, send an email to phonegap+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[trejde...@gmail.com]

Thank you for your reply.

Well... The case is very simple. I used default Bootstrap's CSS and forgot to change it to responsive layout. After doing so, all looks well on both Galaxy Nexus, older devices, as well as on desktop computer.

[madhu latha]

Include meta tag in your html file to adjust the page according to your device's screen.

Example: ' <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">';

--

Thanks & Regards,

Madhulatha