No one likes sites that aren’t adapted for their device. Here, we explain how to make mobile responsive pages for various screen sizes.
To specify how your pages render on different devices, you use a viewport.
What is a viewport?
A viewport determines how a web page will appear on a mobile device. Without a viewport, mobile devices render pages at the typical desktop screen width, scaled to fit the screen. By putting a viewport in place, however, you can decide how big windows should appear, thereby aiding users to view web content across different screens and mobile devices with greater ease.
How do I configure a viewport?
This simple bit of code should be put into the head of your html document. Google recommends this basic meta tag: <meta name=viewport content=”width=device-width, initial-scale=1″>
To break down this meta tag, the “width=device-width” part provides the instruction to make the width of the page the same as whatever screen it’s shown on, whilst “initial-scale=1” gives the command that if a page is shown in landscape (if a device is turned sideways) the page should be made as wide as it can be within that screen.
Note: You should avoid using “minimum-scale”, “maximum-scale”, or “user-scalable” in your viewports, as if you do you are restricting people who may not see well from using your pages
No viewport
Without a viewport, mobile devices render pages at the typical desktop screen width, scaled to fit the screen. Whilst the web page appears normal on a desktop, mobile devices with smaller screens sites without viewports are made far less accessible, with users having to zoom in to make text large enough to read. This means visitors are unable to view sites in full, resulting in a poor user experience.
Configured viewport
By configuring a viewport to be the same width as the device it is displayed on, the text and images are legible without a user having to zoom.
With a majority of internet traffic coming from mobiles and more people having mobile devices than ever before, it’s well worth configuring a viewport for your site to make it more user friendly across mobile devices.