I'm trying to prevent zoom with the meta viewport and also event.prevent default() for the pinch event.
My ultimate goal is to run a function on pinch in and another function on pinch out, but that won't happen if pinch in / out zooms in / out.
So, I can still zoom in and out using pinch zoom in these pages:
http://the-irf.com/hammer/index1.html
http://the-irf.com/hammer/index2.html
If you can help me prevent zoom or even get the alerts to fire on pinch in and pinch out— I'd greatly appreciate it!
You don't have set the meta viewport tag correctly, It should be like below:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I see initial-scale, maximum-scale and user-scalable not present in your meta viewport tag
Related
I was using a function triggered by resize to dynamically adjust the layout of my page, which I use to make sure my page looks good when users expand/reduce their address bars on mobile. But now I found that sometimes resize would also be triggered when user zoom in or out using two fingers or double taps, in which case I don't want the function related to resize event to be triggered.
Is there a way to detect whether the resize event is triggered by zooming?
First of all you can disable zoom pinching functionality on mobile devices with the scale meta tag like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
But, if you still want your users to be able to pinch zoom then you can observe the "devicePixelRatio" value for changes. This value actually refer to the device scale:
window.devicePixelRatio
Here is a link to Mozilla documentation about this.
i am trying to enable pinch zoom during full screen mode.
I called the full screen mode trough my modal element as below. I would like to allow the pinch zoom only to the image, not to the buttons and others elements.... I couldn't find anything helpful.
HTML meta:
<meta name="viewport"
content="width=device-width, initial-scale=1., maximum-scale=12.0, minimum-scale=.25, user-scalable=yes" />
if (document.fullscreenEnabled) {
document.getElementById("myModal").requestFullscreen();
}
I have added this code and it works almost the way it should:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
The problem that has occured now is, when I zoom in with my mobile device, it zooms in but bounces back to original width, so it is a progress that it returns to original width but I have seen websites which is stiff and not possible to zoom at all, how can I achieve that?
I want it to not zoom no matter if I double press or take two fingers and try to zoom it.
Any help is appreciated!
The meta tag posted in the first post is correct, what fixed this was adding this in html tag in css
position:absolute; width:99%;
Hope this helps anyone out there!
Is there any way to be able to zoom images inside divs without allowing the entire page to zoom?
Currently I'm using:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
To disallow zooming, but then I really need to be able to zoom on images in the various views.
So is there any way to allow specific divs/imgs to be zoomable while disallowing zoom on the big page?
Take a look at iScroll. I've used it in PhoneGap to enable pinch zoom on specific divs and may work for your scenario.
When I double-tap near the edge of a page that exceeds the height or width of the browser window in Safari under iOS4, it zooms in or out and/or scrolls up, down, right, or left, depending on the size of the page and the current viewport position. How can I prevent this behavior, please?
I'm working on a site where this is (very) bad; we're preserving several layers of menu state and scrolling horizontally to navigate between layers. Double-tapping hoses the layout, and there's no intuitive way to get it back.
Double-tap does not seem to fire a scroll or touch event as far as I can tell. Other things I've tried:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
... with variations:
user-scalable=no
user-scalable=0
width=device-width
width=320
It looks like making absolutely certain that none of my important elements--I have a static header, scrolling body, and static footer, and the header and body can both scroll sideways--actually exceed the viewport width and have overflow:hidden seems to have done the trick.
Very sad there's nothing official on this, because it's annoying, and breaks most of the other examples I've found online
You have a small typo in you meta tag, between each setting you should use comma. ex.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
I find that the <meta name="viewport" ...> tag generally works on iOS to prevent scaling with double-tap but on the iPad3 on iOS 5.1 there are occasional rare circumstances, which I have difficulty reproducing, where the double-tap zoom gets activated and subsequently screws up the page layout. The behavior is quite buggy. Perhaps using Javascript to manage tap events can help to prevent this from happening while we wait for Apple to fix this. It's difficult to test without having a way to reproduce the bug though.
Disclaimer: I have not tested this method.