Create an iPhone website which adjusts rendersize for portrait and landscape
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 a开发者_开发百科ppearing zoomed in.
Can anyone advise on how to correct this behaviour?
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;
}
You can also listen to the event that fires when the iPhone's orientation changes, i.e. when you flip the phone.
In HTML
<body onorientationchange="someFunction()">
OR In Javascript
window.onorientationchange = someFunction;
加载中,请稍侯......
精彩评论