I've set the following meta tag on my website:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
And it works for all android devices. On iOS however, it disables pinch zoom fully and the double tap zoom in. Unfortunately, it zooms out on double tap.
Any way to solve this?
Time showed that it is very bad practice to set user-scalable=no. So if anybody is looking to prevent user zooming: Don't do it!
Related
I'm using user-scalable=no in my viewport meta tag to disable double tap zooming in iOS. Almost everything seems to work as I wanted except a few very small and specific spots still allow me to zoom by double tapping in the iPhone simulator. Why is this so? Is there some css or other meta tags that could negate the viewport meta tag settings in such small specific areas? Any ideas?
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, minimum-scale=1.0">
...
ios safari doesn't really support this meta tag any more.
you need to add event listener to "gesturestart" event and "preventDefault".
gesturestart event
I have a responsive web, but I want to allow the user to zoom out on this screen:
http://regalauncuento.es/comprar-cuento-infantil?aid=186
Please, open this link in your mobile device, you can check that zoom in works fine, but the zoom out is disabled...
I use this meta viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
I try this too, but zoom out continues fail:
<meta name="viewport" content="user-scalable=1, initial-scale=1.0"/>
What is happening here?, thanks you.
I'm working on a web application that is meant to run on mobile safari. When certain functions of the program are active, the page zooms in, forcing the user to pinch zoom out to see the entirety of the content. I'm using the meta tag that is meant to control zooming on my page:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Is there any way to fix this problem?
What you're looking for is user-scalable=no
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 ,user-scalable=no">
Determines whether or not the user can zoom in and out—whether or not the user can change the scale of the viewport. Set to yes to allow scaling and no to disallow scaling. The default is yes.
developer.apple.com - Meta Tags
I am trying to enable pinch zoom on my website. I've tried to enable zooming by setting meta viewport like this but without any success.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2.0, minimum-scale=1, user-scalable=yes"/>
Any ideas why my site is still not zoomable on ipads and iphones?
This may be a bit late seeing that it has been answered almost a year ago... Although I tried your meta tags on my HTML page of my IOS app.
The tags didnt really let me zoom out, and barely let me zoom in, and when I would zoom, it would revert back to its original size.
Now I was able to zoom out all the way, and zoom in a "a lot" and it would hold the zooms with these meta tags:
<meta name="viewport" content="width=device-width, initial-scale=.5, maximum-scale=12.0, minimum-scale=.25, user-scalable=yes"/>
I am not able to zoom my responsive site in IPhone and IPAD.But at the same time I am not having any problem with Android mobiles. It is perfectly zooming in and zooming out.
I am having the meta tag like this
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
Pretty much says it all on its own:
user-scalable=0
The Safari Web Content Guide tells us to use this when we want "to set the initial scale and to turn off user scaling." This is what prevents you from zooming in and out.
I think you should remove the last 3 atrributes,
, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0
entirely.
That should allow Mobile Safari users to scale if they want to.
You need to also set "minimum-scale=1.0" to whatever you want your users to be able to zoom to (as well as setting the "user-scalable" to 1), for example: 2.0 would 100% zoom.