Meta Viewport Only for Phones

Meta viewport ONLY for phones?

Do you mean this <meta name="viewport">?

<meta name="viewport" content="width=device-width, user-scalable=no" />    

If so, try the following script added in the <head> (taken and adapted from here):

if(navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)) {
document.write('<meta name="viewport" content="width=device-width, user-scalable=no" />');
}

This will detect if the user-agent indicates that the browser is mobile, and will write that meta viewport as required.

set viewport using meta viewport tag for desktop browsers

As mentioned by Quentin, the viewport is not for desktop devices. It is only for mobile devices.

Google says:

TL;DR

Use the meta viewport tag to control the width and scaling of the browser's viewport.
Include width=device-width to match the screen's width in device-independent pixels.
Include initial-scale=1 to establish a 1:1 relationship between CSS pixels and device-independent pixels.
Ensure your page is accessible by not disabling user scaling.

To do what Google says use:

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

I think you need to explain what a viewport is for to your client and why they shouldn't/ don't need to set it to a fixed pixel width. Allow the browser to establish the width of the content.

Reference: https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=en



Related Topics



Leave a reply



Submit