Bigger app with PhoneGap + Bootstrap on Google Nexus

StackOverflow https://stackoverflow.com/questions/14856463

Question

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?

Was it helpful?

Solution

By default, Bootstrap does not support responsive layout. It is explained quite professionally: "Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed".

Changing one meta tag and replacing reference from normal CSS to responsive one in <head> section does solve problem in question:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

After this simple change, PhoneGap applications are correctly adapting to large screens sizes and densities and display Bootstrap elements in correct sizes.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top