Menu Close Menu

viewport MetaTag & Enable Pinch To Zoom For Mobile Devices In Blogger

Pinch to zoom Tablet
A few days ago I was just searching for some new things on web and I just came across a webpage that was providing an article on pinch to zoom bug in the blogger template. When I checked this bug in our template unfortunately I found it there. The bug is simply that the viewport meta tag in the template is set to not allow user Scalling. The mistake is in viewport meta tag is set to "user-scalling=no". We just need to change this value to yes : "user-scalable=yes" so mobile users may zoom.  That's why we prepare a tutorial for our valuable readers.

Also read our previous article.

what is viewport meta tag.

In the early years, when the smart phones came, they knew the Internet wasn’t prepared for them so they expected every website to be around 1000px width (980px on the iPhone) and zoom out the website to fit into the screen. And so the <meta name="viewport"> was created, basically to tell those smart dudes that your website was prepared for them and is the visible area of the webpage as shown in Figure 3-3 and also preparing a webpage for mobile devices optimization.

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

In the above line of code we’ll be telling to the browser “my website adapts to your width”. Without viewport your device uses a virtual viewport which by default is effectively a zoomed out version of your website, this is around 980px on iPhone and 800px on andriod. As soon as you set the viewport and disable this zooming out, the device treats the website as it should and measures out at around 480px wide or 320px depending on device and orientation.


Property Description
width The width of the virtual viewport of the device. Enter a number (pixels assumed), or the keyword "device-width" to set the viewport to the physical width of the device's screen.
height The height of the virtual viewport of the device. Enter a number (pixels assumed), or the keyword "device-height" to set the viewport to the physical height of the device's screen.
initial-scale The initial zoom of the webpage, where a value of 1.0 means no zoom.
minimum-scale The minimum level the user is able to zoom out of a webpage, where a value of 1.0 means the user isn't able to at all.
maximum-scale The maximum level the user is able to zoom in on a webpage, where a value of 1.0 means the user isn't able to at all.
user-scalable Sets whether the user can zoom in and out of a webpage. Set to yes or no.


How to add viewport meta tag in your blogger template


1. Go to Blogger Dashboad>> Form Dropdown Select Template>> Edit HTML and find the following code.
<head>

2. Now Copy And Paste The follwing Code  After/Below <head> tag.
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=10.0, user-scalable=yes'/>

Important:- For Pinch to Zoom
You need to set user scalable yes for Mobile users could zoom :
user-scalable=yes'

With this setting we had no problem using pinch to zoom on the iPad OS and Android tablets. If these default settings don’t work for your webpages, it is highly recommended that you change the settings by configuring the viewport.
Mostly user on the Internet using mobile devices I would recommend you check your blog has pinch to zoom enabled or not. Please feel comfortable to ask us anything where you may need help.

"Be the first to express your thoughts" :

  1. This comment has been removed by a blog administrator.

    ReplyDelete

Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name. We love to hear from you! Leave us a comment.
To ensure proper display, HTML/XML/JavaScript need to be Encode first using this Encoder Tool Then paste the Encoded code here.