CODEWITHSUNDEEP
viewporthybrid-mobile-app
user1833620
user1833620

Reputation: 781

hybrid mobile app viewport

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 ?

Upvotes: 1

Views: 754

Answers (1)

ClosDesign
ClosDesign

Reputation: 3924

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?

Upvotes: 1

Related Questions