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"/>
Related
I've made a mobile version of a webpage and it works on Android and small browser windows without problems.
On iOS however, when a user pinches the screen, it zooms out to fit the entire page on the screen. It's a long page, so this is not ideal.
I have the following in my head:
<meta name="viewport" content="width=device-width,
initial-scale=1.0, user-scalable=no, shrink-to-fit=no">
I'm aware that iOS 10 has a known issue with overriding user-scalable=no, but this is happening also on iOS 9 and 8.
Does anyone have any ideas how I might be able to solve this?
Many thanks
The correct format of that meta tag is as follows:
<meta content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0,width=device-width" name="viewport">
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!
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 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.