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.
This comment has been removed by a blog administrator.
ReplyDeleteVery helpful thanks🙏
ReplyDeleteThanks bro... From Tamil nadu
ReplyDelete