Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Viewport breaking on iPhone reorientation

3:47 pm on Dec 30, 2012 (gmt 0)

Full Member

5+ Year Member Top Contributors Of The Month

joined:Sept 30, 2009
votes: 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>
<meta charset="utf-8" />
<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}
input{border-radius:5px;font-size:18px;height:22px;padding:8px 10px;width:90%;max-width:350px}

<input type="text" />
<input type="text" placeholder="Password" />
<button>Log in</button>