I'm developing a site for mobile devices and have a problem with page scaling via the viewport tag on android phones.
Portrait phone rotation requires "initial-scale=0.62" in order to fit the page to the viewport. Yet "initial-scale=1" works fine for landscape mode. I'm using:
<meta name="viewport" content="width=device-width, initial-scale=1">
I expect the browser to scale the page to the browser's viewport rather than me having to pinch zoom. My phone's viewport are 360 and 640, portrait and landscape. Might this have to do with the page not sizing down to 360px in portrait and scale of 1 is showing the page at the true width?
I just checked the page in Firefox and by resizing the browser window, I'm able to get the page to adjust the layout of objects down to 466px before it will shrink no more. I check the viewport size using https://viewportsizes.com/mine/
If I use initial-scale=.62 then the page viewed on the iPad looks way too zoomed out and buttons are hardly legible.
Can someone explain how to get the page to scale properly?
Try using maximum-scale instead of initial-scale. The maximum scale keeps the scale settings when the user switches from portrait to landscape view.
Like below:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
Or, you may also specify width:
<meta name="viewport" content="width=360, maximum-scale=1"/>
I guess the below works for iPhone and iPad both
<meta name="viewport" content="width=720, maximum-scale=1.0" />
or last try
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
Besides there are CSS3 media queries too.