CODEWITHSUNDEEP
javascriptmobilemedia-queriesmeta
Connor Gurney
Connor Gurney

Reputation: 627

Adding <meta name="viewport"> with mobile detection

As of late, I've seen a few websites which have a statement equivalent to the following in JavaScript / server-side code:

if user is on a mobile device
    print '<meta name="viewport" content="scaling stuff">'

Is there any advantage to only adding the tag on mobile devices? It seems less reliable due to basing it on the user agent but I'd be interested to hear both sides.

Upvotes: 0

Views: 279

Answers (1)

WizardCoder
WizardCoder

Reputation: 3461

I would recommend using <meta name="viewport" content="width=device-width"> or <meta name="viewport" content="width=device-width, initial-scale=1"> on every responsive website you do. It doesn't need to be conditionally added, because it has no effect on desktop devices.

What does it do?

A viewport element gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

(optional) The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. This will prevent the user from zooming in, which is why I tend not to use that part, but could be handy on a mobile app.

What happens if you don't use the meta viewport tag?

The mobile device will assume that the website is 980px wide and attempt to zoom the website to fit it on the screen. It will also attempt to resize the text to make it more readable. This could be handy on a non responsive website, but with a responsive a website you want to have full control over how the mobile is going to render your mobile device.

Upvotes: 1

Related Questions