Viewport questions

Doesn’t look to be widely supported


Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile
4.4 	29 	 	 	Not supported 	 	10-ms[1]

Opera Mobile
11.10 Removed in 15 Reintroduced behind a flag in 16
Safari Mobile
Not supported

It’s from the (well-written) article above…

So what code should I use so I define viewport, don’t allow zooming, and gracefully can handle someone rotating their smartphone - as mentioned in the article above?

Times have changed since that article was written :slight_smile:

I will make this as simple as I can for you. Please pay attention.

  1. You do not need to worry about users rotating phones. The content should adapt if your website is made responsive via media queries. You shouldn’t forbid zooming. That’s just annoying. A responsive website is ideal for phones but perhaps an older person is using your website and they need to zoom in a smidge to read. Don’t forbid it.

Now, please read my article that I linked to. All you have to do is create a website, that when you take the browser edge, and make it smaller (until 300px or so), and you notice no breaks. That is a perfectly responsive website and will handle any issues with any phones, users rotating, etc. You should code a website that uses a few media queries to fix any issues that arise when you resize your page. E.g. at 500px, let’s say you notice that your 2 column layout would be best if they were stacked. Otherwise content is unreadable. That is where you should write am edia query for 500px and down to make them stack. Very simple. See an issue? Think of a possible solution. Then write a media query for it. This is all very simple. You should ignore the @viewport and do not get distracted by it. You are reading on the wrong things.

My approach to RWD is to utilise the free Google Test because that is the acid test. Create a link on your web page and keep testing.

Google Mobile Friendly Tester

Google has no doubt tested every possible mobile case that is on the market and has a section in Google Webmaster Tools displaying non-conforming pages.

That’s good, because you have a way of making things difficult sometimes.

I did read it. A month ago, and an hour ago. Funny, it doesn’t cover the things I asked about. Doesn’t talk about how smart phone no longer have issues when you rotate them. Hmm…

Does RWD include all bold for us old-timers as well? :wink:

Pretty authoritative tone there.

Reading an article from Tuts+ seems like a decent source.

And I asked here to verify things…

Handy link, but it won’t teach me what is right and wrong.

That is why I am trying to learn about the mechanics of RWD here.

Thank God Ryan is so patient tonight! :wink:

Not in bold so you may have missed it.

Also I should mention that if you were to go with device-width, you would have to also provide separate rules for orientation (portrait vs. landscape): device widths do not change simply because you rotate the device sideways. That’s adding even more code, and more headaches!

i.e. Do Not code for devices and you won’t have the problem.

1 Like

IMHO RWD is overrated and most web pages can be made responsive with basic CSS.

1 Like

If you actually did read my article, you mention that a caveat of device-width is taking into account orientations. I mention that the alternative means you don’t have to worry about it. Are you sure you read it?

I’ve mentioned these points to you for the past 4 months about 4-5 times now, so I’m trying anything and everything to make it stick :wink: .

Thanks!! :slight_smile:

Here’s a page on the MS X-UA meta tag identifying the options available -

It doesn’t provide the full tag though, so take a look at this link instead for a further reading

Very simply, just add the meta tag in the <head> section of your HTML page.

This is what I added earlier today…

    <!-- HTML Metadata -->
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

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

The other tags are fine.

1 Like

I think you may have misread that article. After showing that code, it goes on to say:

It’s a far more elegant solution than the metatag, but is a long way from being fully supported. Slot it into your CSS now, to make sure your responsive design behaves itself in IE10 “snap mode”, and keep an eye on its progress in the future. This is where viewport control is headed.

So he’s recommending it as well as - not instead of - the HTML <meta> tag.

##The Crux

If you read nothing else within this post, take one bit of advice away: if you’re designing flexibly, use the viewport meta tag in your . In its basic form, it will set you up for cross-device layout peace of mind:

[quote=“mikey_w, post:7, topic:196171”]
It’s from the (well-written) article above…
[/quote]You also need to remember that the article was written in February 2012, and updated in June 2013 - so it is two years old. Given the pace of development in this area, you really need to go with the most recent sources you can find.

1 Like

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

As mentioned in that article…

The link you provided shows Firefox zooming in.

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.

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.

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! :sunglasses:

Thanks Paul!

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