How to Configure Viewport for Mobile-friendly Design

Having mobile-friendly design is the top important basis for any successful website, but are you sure that your site is fit correctly on all mobile devices. That’s the main reason of configure viewport, to let you control over your pages width and scaling on different devices. Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen.

How to Configure Viewport for Mobile-friendly Design

What is the Meta viewport?

The viewport meta tag is a way to let websites owners to control, how is their pages will display in the visitor’s browser with many instructions like size, scale and zoom of the page. Meta viewport should be placed in the head of HTML page like most of all other meta tags.


How to Configure Viewport for Proper Mobile-friendly Design?

As we mentioned above, meta viewport should be included in the head of your page, it’s a small piece of tag code that will increase your website mobile usability, if you configure it correctly.
Here is the best meta viewport configurations that fit for most websites.

<meta name=viewport content="width=device-width, initial-scale=1">

Let’s clean the meaning of above property attributes code:

  • content=width=device-width: It gives instruction to the browser to match the screen width in mobile device, which lead to match different screen sizes for any mobile devices.
  • initial-scale=1: The initial zoom when visiting the page, where a value of 1.0 means no zoom.

Other Accessibility Considerations

  • minimum-scale, maximum-scale, user-scalable: NO, NO, and NO (set the minimum and maximum zoom, or disable the user’s ability to zoom)
    Meta viewport has many options to let you control your page layout, but you should avoid these property attributes because it negatively impact accessibility and potentially reduce users experience.
  • Don’t give content width any number values rather than “device-width”, because if you made the width 320 as an example, your pages will display correctly only on devices with 320 pixels width and will be smaller on larger screen devices and larger on smaller screen devices. Which will force the visitor to zoom in or out to see the page correctly.


How to Implement Meta Viewport in WordPress Themes?

To implement and configure viewport in your site, just Open WordPress dashboard then go to Appearance->Editor->Header.php, then place meta viewport tag just after the head section.


Also, don’t forget to check your website mobile-friendliness with Google mobile page test to be sure that everything has been set correctly.

To sum it up …

Using meta viewport tag is the main key to get responsive web design and perfect mobile-friendly website optimization. The Benefits of configure viewport is widely used to increase visitors pleased while they browse your site in their mobile devices. So, don’t waste this amazing tag in your mobile optimization strategy.

Leave a Reply