hybrid mobile app viewport

Question

im making hybrid app only for android, and designer gave me 480px(minimum size) layout.

i declared meta view port like this...

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densitydpi=high-dpi " />

also the my css is

 body {min-width:480px; height:100%;}

the problem is when i test on my phone, almost every browser shows perfectly! But Except Mobile Chrome Browser. it shows layout bigger and overflow on the screen...

what did i have wrong ?

Answer 1

To my understanding, Android devices don't use the viewport. iOS devices do. You CSS is actually taking over. So depending on your device's initial width, smaller than 480px, your layout will overflow because of the min-width. Your best bet might be to use the min-width:320px and width:100%. Try that. What do you mean by the "mobile Chrome browser". You mean the native browser that comes predownloaded on the phone or the Chrome browser you download from the Play Store?