Phonegap/Cordova App Shrink too small on high resolution device like Samsung Galaxy S4

Question

My Phonegap/Cordova app looks fine with the setting below, on devices like iPhone 4/4S (640x960), HTC Desire HD (480x800), Samsung Galaxy Note etc.

<meta name="viewport" content="user-scalable=no, initial-scale=0.75, maximum-scale=1, minimum-scale=0.75, width=device-width, height=device-height, target-densitydpi=device-dpi" />

But it shrinks too small on ultra high resolution devices like Samsung Galaxy S4 (1080x1920, 5.0 inches ~441 ppi pixel density), that user may need a magnifying glass to read it.

How do I tweak the viewport so that it looks about the same size across all phone/tablet regardless of screen size or pixel density?

I tried increase the scale to 1.5, it's readable on S4 but then everything is too large on lower density devices.

Any idea?

Answer 1

Try replacing device-dpi by medium-dpi. device-dpi prevents default scaling, while medium-dpi will scale down on low density screens and scale up on high density screens.

There are some refs here http://developer.android.com/reference/android/webkit/WebView.html

Original post and answer go here: https://stackoverflow.com/a/15545381/1039194