Because not every developer will make the webpage responsive. It’s attempting to at least get some sort of default display that somewhat replicates the desktop environment.
The meta viewport tag will render it like a phone, or rather, what you probably want. It’s a bit more complicated, but the meta viewport is needed to make your page responsive.
THis is answered in my article.
I go over width vs device-width in my article. Basically, just because you change orientations, doesn’t change the width you are viewing at. So if you do deviec width, you need to account for landscape AND portrait. That’s why device-width is horrible.
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?
I will make this as simple as I can for you. Please pay attention.
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.
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?
Pretty authoritative tone there.
Reading an article from Tuts+ seems like a decent source.
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.
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 .
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.
?
