?Explain viewports and device width. Also, discuss setting widths in media queries.

Question

What will be an ideal response?

Answer 1

Web pages are viewed within a window called the viewport. Mobile devices have two types of viewports: a visual viewport displaying the web page content that fits within a mobile screen and a layout viewport containing the entire content of the page, some of which may be hidden from the user. The two viewports exist in order to accommodate websites that have been written with desktop computers in mind. A mobile device will automatically zoom out of the page in order to give users the complete view of the page's content, but this often results in a view that is too small to be usable. While the user can manually zoom into the page to make it readable within the visual viewport, this is done at the expense of hiding content.Widths in media queries are based on the width of the layout viewport, not the visual viewport. In order to correctly base a media query on the physical width of the device, one has to tell the browser that the width of the layout viewport should match the device width. This can be done by adding the following meta element to the HTML file:where properties is a comma-separated list of viewport properties and their values.For example:In this meta element, thedevice-widthkeyword is used to set the width of the layout viewport to the physical width of the device's screen.