I'm making a mobile version of my application support site and I have a little WebKit/iOS/HTML/CSS problem here...
I have a page, index.php
, with mobile.css
file attached. In my <head>
tag I have:
<meta name="viewport" content="width=device-width, user-scalable=no, max-scale=1.0" />
My body
's css:
body {
font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue","Helvetica","Lucida Grande",Verdana,Arial,sans-serif;
margin: 0;
background: url(../../images/textured_bg.png) repeat;
color:#454545;
font-size: 14px;
text-shadow: rgba(255, 255, 255, 0.5) 0 1px;
width:100%;
}
Everything works fine in portrait orientation, but when I rotate my iPhone to landscape, Safari scales my content so it looks like in portrait, but a little bigger:
My question: Is there a way, without making custom css for each orientation, to force Safari not to scale my content?