Viewport zoom bounce - javascript

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!

Related

What is the browser auto-zoom based on and how can I offset using CSS or Javascript?

I've built a web page which displays a grid. On the regular screen (laptop / desktop), the browser is at 100% zoom level and the UI looks fine.
However, when I connect my laptop to a projector, the browser automatically sets the zoom % to 125% and everything is bigger and scroll bars appear everywhere.
I don't understand what this behavior is based off or where it is coming from. Is it due to the resolution change?
Is there a way for me to make sure my UI does not get zoomed when I connect to a large screen?
Thanks
You should be able to avoid scaling on certain screens by setting the viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

How to disable (prevent) the mobile web site from horizontal swipe?

I'm using following meta tags. But as you can see in the pictures from the emulator, my website swipes with all the content in it.(Img 1 is the normal case which it supposed to look like and img 2 is the version that i'm trying to resolve.) I'm using small grids in it. I have this problem only on Android devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
Thanks in advance.
You are having an overflowing issue, your one of the DIVs are going beyond the screen.
Check your HTML code and find out your culprit DIV. Set DIV width to 100%. I would have changed my HTML code a bit rather than using hack to prevent swiping, and hence horizontal scroll bar to appear.

Unable to prevent Zoom

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

iPhone viewport confusion / window.innerHeight

I'm having trouble fitting a site to the iphone's screen dimensions.
What I am doing is the following: I have a slideshow with a few pictures running fullscreen in the back of the page and and little text on top.
When I set up the slideshow I do the following:
$('#bg').css('width', window.innerHeight).css('height', window.innerWidth);
Then I insert the Slideshow and scale and crop the pictures accordingly. This works perfectly fine in all desktop based browsers. Yet, the iPhone does not return its actual screen size but a value of 5000 so I get a rather big slideshow. The rest of the layout seems to render perfectly fine according to the given CSS.
I do know about the viewport "thing" with the iPhone and have already read this: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html which led me to inserting the following meta-tag:
<meta name="viewport" content = "user-scalable=no, initial-scale=1" />
Yet again, this does not make any difference, the iPhone will still return a dimension of 5000px.
Anyone can tell me what I am doing wrong? Thanks a lot!
Ok, so what did the trick for me was using this combination of meta-tags:
<meta name="viewport" content="user-scalable=no, width=device-width" />
Try width=device-width in the meta tag - and make sure you dont have any other elements that are 5000px wide.

How can I prevent default double-tap behavior (zooming, panning) in Mobile Safari on iOS4?

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.

Categories