Viewport questions

[mikey_w]

@chrisofarabia

It would be worth expanding your viewport meta tag a little to this

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

https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

The other tags are fine.

I read that link, and Firefox’s “improvement” does not address the issue in the article in my OP.

As mentioned in that article…

(Before)

By stating that the width of your layout is equal to the device width, you’ll run into problems when a device is used in landscape. Take a look at how an iPhone 4 handles our demo, in landscape:

The browser feels obliged to zoom in, in order to match the width of the page.

The link you provided shows Firefox zooming in.

[SamA74]

@mikey_w

As mentioned in that article…

As mentioned in previous posts, adding the meta tag as shown:

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

deals with orientation. I have used it and seen it working with my own eyes on an actual phone. Just add the tags.

@mikey_w

By stating that the width of your layout is equal to the device width, you’ll run into problems when a device is used in landscape. Take a look at how an iPhone 4 handles our demo, in landscape:

I don’t know were this comes from, maybe its out-dated info, something peculiar to the iPhone4 or just plain wrong, I don’t know, but disregard it and move on.

[PaulOB]

@mikey_w

By stating that the width of your layout is equal to the device width, you’ll run into problems when a device is used in landscape. Take a look at how an iPhone 4 handles our demo, in landscape:

That was an old issue and is no longer a problem. You can ignore that as the bug was fixed a couple of years ago and my iphone4 does not render the page like that.

More serious problems will arise if you do not apply "width=device-width and initial-scale=1.0 just like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

See my post here for extensive tests on this issue and further confirmation can be found in tests run on the quirksmode site shown in a subsequent post in that thread.

Suffice to say you can be happy that the correct tag to use is the one I have shown above and don’t be tempted to modify it (or to stop users ability to scale by using maximum-scale).

[mikey_w]

@PaulOB

@mikey_w

By stating that the width of your layout is equal to the device width, you’ll run into problems when a device is used in landscape. Take a look at how an iPhone 4 handles our demo, in landscape:

That was an old issue and is no longer a problem. You can ignore that as the bug was fixed a couple of years ago and my iphone4 does not render the page like that.

More serious problems will arise if you do not apply "width=device-width and initial-scale=1.0 just like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

See my post here for extensive tests on this issue and further confirmation can be found in tests run on the quirksmode site shown in a subsequent post in that thread.

Suffice to say you can be happy that the correct tag to use is the one I have shown above and don’t be tempted to modify it (or to stop users ability to scale by using maximum-scale).

When Paul O’ speaks, I listen!

Thanks Paul!