homepage Welcome to WebmasterWorld Guest from 54.196.168.78
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
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>

 

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