Mobile Friendly Viewport

Article Index

Mobile Friendly Viewport

User Experience

The viewport defines the area of a web page visible to a visitor.

The viewport varies in size with the type of device being used to view content. A desktop computer's viewport will be larger than that of a tablet and a mobile phone.

In the era when content was read on desktop devices web pages could have a fixed width and did not need to be responsive to the device being used to view the content.

HTML5 introduced the viewport <meta> tag as a method to let web designers take control over the viewport and match it to a device screen size.

The following <meta> viewport element should appear on each web page to make it mobile friendly: <meta name="viewport" content="width=device-width, initial-scale=1.0">