6

When I view the following html file with Safari in an iphone, it does not display the entire width of the content as it's supposed to:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>iOS Viewport Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
body #wrap {
    width: 1008px;
    border: 1px solid #000;
}
h1 {
    font:30px sans-serif;   
}
</style>
</head>

<body>
<div id="wrap">
<h1>Here's some quite eloooongated text that should make the screen at least 1008px wide or more</h1>
</div><!-- end #wrap -->
</body>
</html>

Can anyone see what I'm doing wrong? For what it's worth, I have iOS 6.1 and Safari 6.0

2 Answers 2

8

Even though I read apple's various viewport guidelines very carefully, apparently I misunderstood. If a site is non-responsive, like mine, the correct meta in this case is

<meta name="viewport" content="width=1008"/>

This makes the viewport fit the content in both portrait & landscape orientation. There's a discussion of this approach here: http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design

2

I was googling to see if anyone else had encountered this issue as well. Thought I'd share my results.

My non-responsive site is about 1200px wide, and I wanted it to show the whole site's width while in portrait mode. Setting the scale to 0 also seems to work on what I've tested:

<meta name="viewport" content="width=device-width, initial-scale=0"/>
3
  • 1
    Wowie! this helped me! Any idea why? Dec 30, 2014 at 10:55
  • alanvitek, can you please explain why this actually worked? Oct 12, 2015 at 12:51
  • This worked great on iOS but not at all on Android. My testing seems to show that the two don't behave at all similarly when it comes to initial-scale and max-scale
    – Jad S
    Mar 28, 2018 at 22:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.