Reputation: 305
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.
Upvotes: 7
Views: 6460
Reputation: 6820
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
Upvotes: 3