| Viewport breaking on iPhone reorientation
|
ocon
msg:4532020 | 3:47 pm on Dec 30, 2012 (gmt 0) |
I have a problem with my viewport when I view my site on an iPhone.
If I load the page with a portrait orientation the page looks fine. If I rotate the phone to a horizontal orientation the page still looks fine. However, if I rotate the phone back to portrait orientation then the page's set scale breaks and I have an excess margin on the right.
I know my site is not the only one that does this as this is one thing that bugs me about Wikipedia's mobile site.
I scaled back the html as much as I could, but it was strange. If I remove seemingly arbitrary code like the input placeholder or the min-height then the viewport doesn't break down.
Can somebody confirm that their iPhone breaks as well and is there anything I can do to fix this?
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<style type="text/css">
body{margin:0;padding:55px 0 0;min-height:416px;-webkit-text-size-adjust:none}
div{margin:0;padding:10px}
input{border-radius:5px;font-size:18px;height:22px;padding:8px 10px;width:90%;max-width:350px}
</style>
</head>
<body>
<div>
<input type="text" />
<input type="text" placeholder="Password" />
<button>Log in</button>
</div>
</body>
</html> |
|
|
|
