The view-port meta is a short tag that is included in the head of the HTML document that tells the browser how the page should be rendered. The view-port meta element is what turns a regular website page into a responsive page.
Options of the View-port meta tag: There are many options that can be included in the content section of the meta view-port:
- width: It is used to set the width of the layout view-port. In our case, we set this to the “device-width” which overrides Apple’s default setting of 960px.
- initial-scale: It is used to set the initial zoom of the page and the width of the layout view-port. We set this to 1 which is the default view, but you can easily increase this number (not recommended).
- minimum-scale: It is used to set the minimum zoom level i.e. how much the user can zoom out.
- maximum-scale: It is used to set the maximum zoom level, i.e. how much the user can zoom in.
- user-scalable: It is used to set whether the user is allowed to zoom the content. Setting it to “no” would prevent zooming.
By default, the view-port tag is used as follows:
Problem with this meta tag on some devices: The default usage of the meta tag gives rise to some problems on iPhone devices and some Android phones. This occurs when the orientation of the screen changes (portrait to landscape).
This occurs because the size of the content remains the same as it were in portrait mode even if the device has been rotated to landscape mode. This usually happens due to the “width” attribute that is set to “device-width” in the meta tag. As the width of view-port and device are different, when the screen is rotated to landscape mode, theoretically the view-port width should change to device height but this cannot be implemented efficiently.
The solution to this can be implemented as follows:
Advantage of using this method:
- This seems to lock the device into 1.0 scale regardless of it’s orientation.
Disadvantage of using this method:
- It completely disables user scaling (pinch zooming, etc).
Output on an iPhone device:
- HTML | Viewport meta tag for Responsive Web Design
- What's the difference between meta name and meta property?
- How to Set Calc Viewport Units Workaround in CSS ?
- HTML | <Meta> Tag
- How to use Meta Tag to redirect an HTML page?
- How to get card vertically centered between search bar and bottom of the viewport?
- How to get the dimensions of the Viewport using AngularJS ?
- HTML | DOM Meta Object
- HTML | <meta> charset Attribute
- HTML | <meta> content Attribute
- HTML | DOM Meta content Property
- HTML | DOM Meta name Property
- HTML | <meta> scheme Attribute
- HTML | <meta> name Attribute
- HTML | DOM Meta httpEquiv Property
- HTML | <meta> http-equiv Attribute
- What purpose does a <script> tag serve inside of a <noscript> tag?
- Difference between <article> tag and <section> tag
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.