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();
}
Related
I have website 1000x820
It's not a real website, don't ask me about responsive web design.
viewport:
<meta name="viewport" content="target-densitydpi=device-dpi, width=1000px, user-scalable=no">
Then on Iphone SE with iOS 10.
Add to Home Screen.
Launch the application with 1000px width and it view very good with both orientation and we can change it. Of course we can't zoom.
Focus an input and type text. While nothing zoom. Unfocus the input or change an orientation and our scale will be broken. We can't change it.
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="target-densitydpi=device-dpi, width=1000px, user-scalable=no">' );
It didn't help me.
Perversion with fonts too.
I've one bad idea. Trace changes of viewport and refresh the page.
You're meta tag includes user-scalable=no and an explicit width.
Remove the user-scalable and update width to width=device-width. You can use initial-scale=1.0 to set a zoom level for devices.
MDN - Using the viewport meta tag to control layout on mobile browsers
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 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" />
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'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