The Pinch Zoom feature allows a user to zoom in or zoom out web pages using their two fingers when they are on a touchscreen mobile device. Mobile devices have comparatively low screen size as compared to laptops and Desktop computers. Readers sometimes want to zoom a particular part of your blog in order to see the content more clearly. This is why the pinch zoom feature is quite important. And, if your website is not mobile-friendly you will lose rankings eventually.

I have recently added the pinch-zoom interface to We You and Tech after one of my readers complained that he couldn’t zoom my web pages when he was accessing the website from his mobile device.

How to add the Pinch Zoom feature inside your WordPress site?

To add the pinch-zoom interface on your WordPress site, go to your theme editor section and inside the header.php file, change the highlighted code under the head tag. Refer Screenshot.

changing viewport under header.php to add a pinch-zoom interface to my wordpress site

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">

Or,

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

Both the codes will work. In the latter one, you can also set user-scalable=1.0

So, what is happening here? What we have changed? 

A short explanation of the commands we used will help you understand the concept. 

width=device-width

This command tells the browser “my website adapts to your device-width”.

initial-scale

This defines the scale of the website, This parameter sets the initial zoom level, which means 1 CSS pixel is equal to 1 viewport pixel. This parameter helps when you’re changing orientation, or preventing default zooming. Without this parameter, a responsive site won’t work.

maximum-scale

Maximum-scale defines the maximum zoom. When you access the website, the top priority is maximum-scale=1, and it won’t allow the user to zoom.

minimum-scale

Minimum-scale defines the minimum zoom. This works the same as above, but it defines the minimum scale. This is useful when the maximum-scale is large, and you want to set a minimum-scale.

user-scalable

User-scalable assigned to 1.0 means the website is allowing the user to zoom in or zoom out. But if you assign it to user-scalable=no, it means the website is not allowing the user to zoom in or zoom out.

Source: Stack Overflow