Menu
I'm creating a simple mobile website to render specifically on iPhone. I have been researching the viewport setup in order to have the site fixed at 100% So far I have found that the dimensions are
Portrait: 320px
Landscape: 480px
To render the page at full zoom I have used the following meta tag in the html
<meta name="viewport" content="width=device-width; initial-scale=1; user-scalable=no" />
This works great in portrait, however when the iPhone is rotated to landscape mode the page is not resized accordingly, instead appearing zoomed in.
Can anyone advise on how to correct this behaviour?
816
width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0
Let's assume your website is wrapped in a container called #wrapper.
We can set the width to 100%, and only allow it a maximum value of 480px. Like so:
#wrapper {
width: 100%;
max-width: 480px;
}
In HTML
<body onorientationchange="someFunction()">
OR In Javascript
window.onorientationchange = someFunction;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
