What is a mobile viewport?
- A viewport is the window in which a webpage is seen
- Configuring the viewport means declaring how big that window should be
- A viewport is configured by adding or editing the viewport metatag
- Viewports help users see web content properly on different sized screens such as mobile devices
How to configure the Viewport?
The way we configure the viewport is the viewport meta tag. This is a small bit of code that we put into the head of our html document.
Google recommends 1 the following viewport meta tag for a responsive website...
The viewport metatag shown above is saying...
- width=device-width
- initial-scale=1
In more human terms these say..
- Width: Make the width of the page the same width as whatever screen it is being shown on.
- Initial scale: If the page is shown in landscape (a phone turned sideways) make the page as wide as it can be within that screen.
How to check your viewport
To find out if your pages are configuring the viewport tag correctly (or at all) use our mobile seo tool.
No Viewport
In the above image no viewport is declared. On the desktop the webpage appears normal but on a mobile device with a smaller screen the whole webpage is shown by making everything smaller so it will fit on the screen. This means then when a user goes to this page they have to zoom in just to make the text large enough to read.
Configured Viewport
When we configure the viewport to be the same width as the device it is being displayed on, the text and images are legible without a user having to zoom in just to read the page.
Accessibility
Do not use "minimum-scale", "maximum-scale", or "user-scalable" in your viewports. If you do you are restricting people who may not see well from using your pages.
by