Size Content to Viewport

What is sizing content to viewport entail?

The rule for sizing content to the viewport is triggered when the content of a web page does not fit within the viewport’s specified size. This forces the user to zoom into the page manually in order to read the content properly.

Text Hover

The image on the left shows how the content is rendered when the viewport is not set. The image on the right has the viewport set to match the screen size of the mobile device.

Why is sizing content to viewport important?

Better User Experience

Users scroll web pages in a vertical fashion, but scrolling it horizontally or having to zoom in or out is not something they are used to not enjoy, which results in a poor user experience.

Mobile Responsiveness

when designing a web page that will be accessed by users on a mobile device, using a meta viewport tag with the dimensions specified for the mobile device, helps improve the user experience.

Different mobile devices have different screen dimensions. This is why the viewport should be configured such that the web page renders properly on every mobile device.

How to size content to viewport

Instead of using absolute values, like say “width: 360px”, consider using relative value for width. For instance, use “width:100%”. This allows the content to span the entire width of the viewport. Also avoid using large absolute values, as it may extend beyond the viewport on smaller screens

By using the value “width=device-width”, the viewport instructs the web page to match the width of the mobile device’s screen. As a result, the content reflows to match the screen size irrespective of whether it is being rendered on a large desktop or a small smartphone.

Use CSS media queries for responsiveness. This helps to change the style based on the mobile device that is rendering the web page, resulting in better user experience.

The following are some of the most popular queries used while designing responsive web pages

min-width: applicable for any browser width greater than the defined value
max-width: applicable for any browser width less than the defined value
min-height: applicable for any browser width greater than the defined value
max-height: applicable for any browser width less than the defined value

Want to check for size content to viewport?

Growth Robotics' RoboAuditor generates website audit report with actionable insights on 70+ SEO best practices