Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Meta viewport : width=device-width or initial-scale=1 or both

For a fully responsive web design, which one of the following meta viewport declaration should I use :

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

I would like the design to fit the screen after rotating the device.

like image 742
cmn Avatar asked Apr 16 '14 18:04

cmn


People also ask

What is the initial-scale=1 part of the viewport meta tag?

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag: Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.

What is meta viewport in HTML?

A <meta> 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).

What is the purpose of the meta tag width=device-width?

This meta tag basically helps let us take control of this viewport. width=device-width sets the webpages width to the width of the device screen. initial-scale=1.0 sets the initial zoom level of the webpage when it's loaded.

Do not let the content rely on a particular viewport width?

Do NOT let the content rely on a particular viewport width to render well - Since screen dimensions and width in CSS pixels vary widely between devices, content should not rely on a particular viewport width to render well. 3.


1 Answers

Personally, I would use:

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

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out

like image 76
Tricky12 Avatar answered Sep 20 '22 00:09

Tricky12