In viewport meta tag in CSS for achieving responsive web design we set width = device-width like <meta name="viewport" content="width=device-width"> so that the page's width equal to that of the device's width , so that users do not have to scroll to see the page but what about the height ? Does the browser infer the height based on the width and make it device-height ???
Asked
Active
Viewed 3,850 times
3
titlu
- 119
- 2
- 9
-
1Change `content="width=device-width, initial-scale=1"`, the height is bonded with the width. – d_z90 Sep 05 '16 at 10:55
-
ok.. so even height will be equal to device-height ? – titlu Sep 05 '16 at 11:03
-
1Height will increase according to content. – Abhishek Pandey Sep 05 '16 at 11:08
-
Yes, since by `initial-scale=1` you set the initial zoom level to 100% and if the width changes, the height will do too – d_z90 Sep 05 '16 at 11:09
-
Just another doubt does initial-scale=1 mean content size will be same as web page size ? so there won't be any need for zoom in/out ? – titlu Sep 05 '16 at 11:40
-
1height of a webpage is irrelevant to the media upon which it is displayed. Height scrolls. Simple. – Martin Sep 05 '16 at 11:57
2 Answers
3
The correct meta tag for a responsive website is the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
The width=device-width part sets the width of the page to follow the screen-width of the device. The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser. You don't need to set a specific height, since window dimensions are always both scaled on change. But in case, you can change the content of the meta tag with:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
Have a look here if you have more doubts.
d_z90
- 1,213
- 2
- 19
- 48
-
I looked but still initial-scale=1 is not clear to me , does it mean content size will be same as web page size ? so there won't be any need for zoom in/out ? – titlu Sep 05 '16 at 11:53
-
If you set the `width` equal to the `device-width` and `initial-scale=1`, it means that the window is of the same dimension of the device screen and the scale is 100% (which means that does not need to be zoom in/out). If you change the dimensions of the screen, then the size will also change since the width is bonded with the device dimensions and the scale will always remain the same. – d_z90 Sep 05 '16 at 12:00
3
<meta name="viewport" content="width=device-width, initial-scale=1">
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 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.)
Read this https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag then hope clear everything.
Bipon Biswas
- 11,397
- 1
- 26
- 37