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.
Related
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" />
Is there any way to change the default zoom of a browser with viewport or javascript,when users acces your website?(PC,Laptops)
Ohh ive seen you mean PC, Laptops
That is only possible via css (or javascript css manipulation) you should set a zoom attribute to the body element
even though i don't recommend to do this its the only way I know
OLD POST:
You should give this site a try:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
especialy this:
<meta name="viewport" content="width=device-width, initial-scale=1">
The initial scale is like a zoom for your page
Try
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
where initial-scale is what you want, you also might want to change user-scaleble to yes depending on system requirements.
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" />
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
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.