What is Viewport?
A Browser’s viewport is the area of web page in which the content is visible to the user. The viewport does not have the same size, it varies with the variation in screen size of the devices on which the website is visible. For a laptop, the viewport has a larger size as compared to a smartphone or tablet.
The laptop screen is wider
On smartphones the page is adjusted due to narrower screen
Note: When a page is not made responsive for smaller viewports it looks bad or even breaks on smaller screen. To fix this problem introduce a responsive tag to control the viewport. This tag was firstly introduced by Apple Inc. for Safari iOS.
This is the common setting of viewport used in various mobile-optimized websites. The width property governs the size of the viewport. It is possible to set it to a specific value (“width=600”) in terms of CSS pixels. Here it is set to a special value(“width= device-width”) which is the width of the device in terms of CSS pixels at a scale of 100%. The initial-scale property governs the zoom level when the page is loaded for the first time.
Note: The meta tag should be added in the head tag in HTML document.
A Responsive tags has the following attributed:
- width: Width of the virtual viewport of the device.
- height: Height of the virtual viewport of the device.
- initial-scale: Zoom level when the page is first visited.
- minimum-scale: Minimum zoom level to which a user can zoom the page.
- maximum-scale: Maximum zoom level to which a user can zoom the page.
- user-scalable: Flag which allows the device to zoom in or out.(value= yes/no).
Wide Display output:
Narrow Display output:
- What's the difference between meta name and meta property?
- HTML | <Meta> Tag
- How to use Meta Tag to redirect an HTML page?
- How to set the view-port meta tag for iPhone that handles rotation properly ?
- How to get card vertically centered between search bar and bottom of the viewport?
- How to Set Calc Viewport Units Workaround in CSS ?
- How to get the dimensions of the Viewport using AngularJS ?
- Web 1.0, Web 2.0 and Web 3.0 with their difference
- How to design Responsive card-deck with fixed width in Bootstrap ?
- 10 Web Development and Web Design Facts That You Should Know
- HTML | Responsive Modal Login Form
- HTML | Responsive full page image using CSS
- How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap?
- How to put a responsive clear button inside HTML input text field ?
- Creating Responsive Grid Vanilla using HTML,CSS and Bootstrap
- How to make a HTML div responsive using CSS ?
- HTML | DOM Meta Object
- HTML | <meta> charset Attribute
- HTML | <meta> content Attribute
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. 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.