Menu
I'm developing a mobile web site. But the zoom effect is not working on my pages. I've used the following tag in the pages.
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
I want to know:
Is it possible to get the zoom effect with this tag and how to use it in correct way?
Are there any more tags I can use for this purpose?
Our client base is mostly on iPhone. Are there special things/techniques I should consider/use when developing a mobile web site for iPhone users?
995
Giving a meta tag attribute "user-scalable=no" will restrict the user from zooming elsewhere. Prevent zooming all together by adding this meta tag to your head tag. This tells the mobile browser to use the same width scale and will not allow the user to zoom in at all, hence also disables that annoying behavior.
By default, Chrome sets the zoom level to 100%. To manually adjust the settings, use the Ctrl key and “+” or “-” combos to increase or decrease the page magnification. If you are using a mouse, you can hold down the keyboard Ctrl key and use the mouse wheel to zoom in or out.
This is because you've set the maximum-scale to the minimum amount (1.0) which means it won't be zoomable beyond what is rendered initially. You need to set the maximum-scale to something else between 1.0 and 10.0 in that meta tag. The default by Apple is to have the maximum-scale as 5.0 as per Apple's Documentation.
Apple's Documentation on Meta Tags has a table on Viewport properties which list all the viewport meta tags which can be used
103
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
