Different layouts for different android phones and tablets

If you are developing a mobile app which for  both phones and tablets, sometimes you may be confused by the way the html pages with the fonts, images are rendered. Though the number of pixels in the higher end android phones shows 768pixels (or webkit-device-pixel-ratio =2) and for an android tablet 600pixels, so you must be thinking I should be using larger images and fonts for the 768 pixels rather than the tablet.

NO!

Here lies the concept of webkit-device-pixel-ratio.
As per this documentation,  A screen with low density has fewer available pixels per inch, whereas a screen with high density has more pixels per inch

So, even if the number of pixels in Nexus4 is 768, but the web-device-pixel-ratio is 2, hence for a lower end android device(320pixel) and a higher end android device with device-pixel-ratio=2 should use same css files.

In order to render different css/html pages for an android app, you can check whether the app is opened in Tablet or phone. Based on that render the html pages.

• Create layout.xml within the res/values folder of your android app.

<resources>
    <bool name=\"isTablet\">false</bool>
</resources>

• Create layout.xml within the res/values-sw600dp folder of your android app.

<resources>
    <bool name=\"isTablet\">false</bool>
</resources>

• Within the Actitvity java file within src folder, put this code: This will detect whether your device is phone or tablet and based on that it will call the index pages which will have different css files.

boolean tabletSize = getResources().getBoolean(R.bool.isTablet);

if (tabletSize) {

super.loadUrl("file:///android_asset/www/index_hdpi.html", 3000);

} else {

super.loadUrl("file:///android_asset/www/index_ldpi.html", 3000);

}