iOS ignoring meta viewport width=device-width, initial-scale=1.0

14,864

Solution 1

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

Solution 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"/>

14,864

yitwail

Good to be here.

Updated on June 19, 2022

Comments

yitwail 5 months

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

Miguel Stevens almost 8 years

Wowie! this helped me! Any idea why?
Alexander Suraphel about 7 years

alanvitek, can you please explain why this actually worked?
Jad S over 4 years

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