homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Viewport breaking on iPhone reorientation

5+ Year Member

Msg#: 4532018 posted 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>
<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>


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved