Desktop browser and mobile browser are not the same. There is no window, scrollbar, resizing option in the mobile browser. User flick, pinch and zoom in mobile browser, and these gestures are not there in the desktop browsers. Because of these interaction differences, viewport on the desktop and mobile are not same.

Why viewport is important for mobile browser

In any responsive web design project, applying viewport is the first and most important step, that make a web page presentable in the mobile browsers. Viewport controls how a web page will display on a mobile device. If the viewport is not applied, mobile device will render the page at a typical desktop screen width, scaled to fit the screen. That force users to zoom before they can interact with the page.

Meta viewport tag

We get control over the page’s width and scaling on different devices by setting the viewport. Meta viewport gives the instruction to browser, on how to control page’s width and scaling. It actually override the browser’s default behavior.

Fixed width viewport and responsive viewport

Viewport width can be set as fixed or responsive width. Specifying fixed pixels content = ‘width=320’ means the page won’t appear properly on wider devices. And responsive viewport value like content = ‘width=device-width’ will instruct the page to match the screen’s width and reflow content to match the different screen sizes.

Portrait to landscape mode zoom – initial-scale

Browser like iOS and window phone, keep the page’s width constant when rotating to landscape mode. It actually, zoom rather than reflow to fill the content. Attribute initial-scale=1 allow the page to take full advantage of the full landscape width.

Mobile zooming control – user-scalable, minimum-scale, maximum-scale

It is possible to control the zooming of the viewport by setting minimum, maximum zoom or completely disable the zoom by using the attributes – minimum-scale, maximum-scale, user-scalable

zooming control attributes like user-scalable, minimum-scale, maximum scale should be avoided as it negatively impact accessibility

Some meta viewport related resources

• Apple iOS – Configuring Viewport
• Google – Configure the viewport
• The mobile viewport and orientation