How to Configure Viewport for Mobile-friendly Design

Having a 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 the width of your page 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.

What is the Meta viewport?

The viewport meta tag is a way to let website owners control, how 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, a meta viewport should be included at the head of your page, it’s a small piece of tax code that will increase your website’s 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">

Lets 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.

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

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 getting responsive web design and perfect mobile-friendly website optimization. The Benefits of configuring a viewport are widely used to increase visitors’ pleasure while they browse your site on their mobile devices. So, don’t waste this amazing tag on your mobile optimization strategy.

Common questions about How to Configure Viewport for Mobile-friendly Design