What is the best way to define the viewport of a webpage?

Question

I have a habit of looking at the code of many of the websites I visit and have seen the viewport defined in many different ways.

I have seen this

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

and this

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui" />

and this

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

and this

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0 " />

I thought about combining all of them into something like this

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />

But is there any benefit in that? What is the best way?

Answer 1

width=device-width

this means we are telling to the browser “my website adapts to your device width”

Initial-scale

This define scale the website, This parameter sets the initial zoom level, which means if 1 CSS pixel is equal to 1 view port pixel. This parameter help to when you changing orientation mode, or preventing a default zooming. without this parameter responsive site work.

Maximum-scale

Maximum-scale define maximum zoom. When you access website top priority is maximum-scale=1 won’t allow the user to zoom.

Minimum-scale

Minimum-scale define minimum zoom. this work same as above but define minimum scale. If you not define this its work without using this is useful when maximum scale is large and you want to set minimum scale that time you can use.

User-scalable

User-scalable assign 1.0 means website allow to zoom in or zoom out.

But if you assign User-scalable=no its means website not allow to zoom in or zoom out.

Hope this help you!

Above is Sky Dreams answer on the following question: What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?

Please review the following links:

Maximum-scale=1.0: http://a11yproject.com/posts/never-use-maximum-scale/

User-scalable=no: To "user-scalable=no" or not to "user-scalable=no"

Minimal-ui: http://www.therightcode.net/use-minimal-ui-in-viewport-meta-tag/