I'm trying to disable document zooming in my web page.
I'm creating a web page for laptop Touch Screens that are running on Windows 8 this web page contains a pictures inside a dragabble divs ... the user drag it and drop it in a container then the application should let him/her zoom-in & out the image using(fingers or mouse scroll) ... every thing is cool.
but, the problem is if the image didn't recognize directly the pinch (to zoom) or the user put his fingers outside the image the document starts to (zoom-in & zoom-out)
what i need is to disable the document zooming using JQuery or css. please help.
if you want to prevent pinch to zoom on your document you need to add meta tags to your html head.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
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'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" />
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.
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.
I have a responsive layout with a fixed header. When scaling (zooming) is enabled via the viewport meta tag, the layout can break when the user zooms because the header also zooms - which is BAD. (I wish I could keep just the header in place without scaling no matter what the current scale setting is). Anyway, that's why I'm use the following meta tag that disables scaling:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
My goal is to implement some sort of media viewer like Facebook that overrides the viewport settings of the document. Upon closing, it should restore everything back to normal. I tried opening an iframe that loads a document that can scale, but it seems like the parent document overrides the iframe.
FYI, I'm using jquery.
Just discovered that with jQuery you can do this:
var meta = $('meta[name=viewport]');
$(meta).attr('content', 'device-width, initial-scale=1, maximum-scale=5');
I could get more fancy... like getting the original setting first and then restoring it when you're done. I tested this on iOS 6 and it works. I have not tested it on other devices.