Detect if browser care about meta viewport

Question

I want to accomplish something, and for that I need to know if the browser care about the meta viewport.

For example, chrome for iOS will be adjusted by the content of viewport. But chrome for windows won't.

What would be the best way to know if a browser uses the viewport content?

Answer 1

It looks like setting the viewport tag is up for a bit of debate. It sounds like your question might warrant ("Some visitors in my site don't care about responsive design") looking into the afore-tagged HTMLBOY blogpost; however, if you continue to use it, there are a few things to be aware of (the first, second, and third really being the take away points):

1. The website, itself, must be responsive - not just the browser, i.e. <meta... content="width=device-width"> won't do anything unless your website knows how to scale
2. It is true that the viewport tag is not currently a part of any web standard and was originally Apple-proprietary (this is the root, perhaps, of your problem). Not all browsers support it.
3. A pixel is not a pixel, i.e. a CSS pixel is not a physical pixel - the two are not tied together (this means that configuration attributes on the <meta> tag when related to the viewport can become problematic (particularly considering point no. 2, above, and elucidated in the linked MDN article in the same point). For further reading about the complications, you can read here and here
4. (helpful tip) If content on the website is important, don't set the maximum-scale or the user-scalable=no attributes. This will stop the user from examining important text more closely.

Now that all that is out of the way...

The answer to your question, "What would be the best way to know if a browser uses the viewport content?", is that there really is no great way to do it.

However, we do have two properties that can help us using in-line JavaScript that relate to the two concepts of the "visual viewport" (smaller) and the "layout viewport" (wider) thanks to the incompatibility between browsers "back in the day".

The visual viewport is the part the users sees on his or her screen - the part currently seen. This is what is scrolled when examining content larger than the device screen.

Everything related to CSS is calculated in relation to the layout viewport. As the linked article states, "How wide is the layout viewport? That differs from browser to browser."

Thus the element takes the width of the layout viewport initially, and your CSS is interpreted as if the screen were significantly wider than the phone screen. This makes sure that your site’s layout behaves as it does on a desktop browser.

So, how can we leverage this to our advantage?

We can't detect if the browser supports the tag; however, we can detect if the browser has applied it. I'm not going to re-invent the wheel, so I'll link you to this SO answer and then an article which (already linked above) delves deeply into the topic. This knowledge should point you in the right direction.