Initial-scale=1 or not?

HTML & CSS
1

Frankly I’m confused as to whether I should use

<meta name="viewport" content="width=device-width, initial-scale=1" />
or
<meta name="viewport" content="width=device-width" />

Google WMT seems to want the former but I have one site where I have trialled this and I have to pinch the screen to get the right size on my iPhone 4s. I have limited other options for testing what it is like on other mobile devices.

Any words of wisdom as to which is preferred?

2

It’s probably for the best to keep it in.

There was also this thread which touched on this - Mobile Viewport Orientations initial-scale=1.0

Although the findings may be outdated; better safe than sorry!

3 
<meta name="viewport" content="width=device-width, initial-scale=1" />

Will try to render the width of the page at the width of its own screen 1:1. If that screen is 480px wide, the
browser window will be 480px wide, rather than trying to zoom out and fit it inside the viewport at full width.

You should only add this if your website is responsive and can be sure it will scale otherwise your going to run into problems.

4

Yes use the one with initial-scale=“1” otherwise you run into the zoom bug on iphones and also media queries will not get picked up for the wider landscape widths either.

Without initial scale in place the landscape view is exactly the same as the portrait view which means the exact same number of characters across the screen; effectively a zoomed view of the portrait view. This renders rotating the device a waste of time as you get no change apart from larger text.

The tests in my thread that Ryan linked to are still accurate and not one instance of omitting initial scale has any benefit that I can’t see.

5

Thanks, chaps. I appreciate the help.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.