Mobile browsers often have no scroll bars or resize buttons, instead the user pans around a webpage by moving their finger across the screen and zooms by double-tapping or pinching the screen. The way users interact with web content on the desktop and mobile are not the same.

The viewport on a desktop is the visible area of the webpage, the user resizes the viewport by resizing the window. If the webpage is larger than the viewport, then the user scrolls to see more of the webpage. When the viewport is resized the web browser may change the document’s layout.

Following Apple Safari’s lead many mobile browsers use the viewport as the area that determines how content is laid out and where text wraps on the webpage. The viewport can be larger or smaller than the visible area.

Using the double tap and pinch gestures, users can change the scale of the viewport but not the size. The only exception is when the user changes from portrait to landscape orientation, under certain circumstances change the webpage layout.

You can set the viewport size and other properties of your webpage, to help improve the presentation of the webpage, with just a single line of meta code in the header of your website.

<meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=yes" />

In this example code snippet above we have set the content of the website to be equal to the width of the device. The initial scale to 50% and to allow the user to scale the webpage of their own accord.

Typically, you set the viewport width to match your web content. If your webpage is narrower than the default width then set the viewport width to the width of your webpage. E.g. width=720

You can adjust the initial scale of the website, where 1.0 = 100%. You may wish to do this if mobile devices aren’t seeing the entire width of a page or the text is so small it has become unreadable. E.g. initial-scale=0.5

If desired you can prevent the end user the ability to scale the webpage themselves. E.g. user-scalable=no

See below for examples of how the initial scale value effects the presentation of the webpage.

Viewport Default

Viewport Scale 1.0

Viewport Scale 1.5

Viewport Scale 0.5

Other CSS properties worth noting down when developing more mobile friendly sites include the min-width and max-width properties. These properties are useful when dealing with floating elements where you want elements to remain on the same line as one another. Providing enough width for two elements to fit side-by-side without any overlap.