The complete zooming should be under our control.
Just like adobe did Check this URL
I tried using meta tags
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
But didnt worked. Any help? I think it can be done using javascript.
function stopWheelZoom(event) {
if (event.ctrlKey == true) {
event.preventDefault();
}
}
function stopKeyZoom(event) {
if (event.ctrlKey && [48,61,96,107,109,187,189].indexOf(event.keyCode) > -1) {
event.preventDefault();
}
}
document.addEventListener("keydown", stopKeyZoom);
document.addEventListener('mousewheel', stopWheelZoom);
document.addEventListener('DOMMouseScroll', stopWheelZoom);
Note this only disables the typical controls for zoom, they don't disable the zoom functionality as that is not accessible to page scripts (it's above page level).
Also note it does not disable pinch zoom gestures. Most mobile versions of modern browsers allow pinch zooming on a layer above the actual page. Once a pinch zoom gesture is detected, it's handled by the browser and the page does not have access to it.
the Non-standard CSS zoom
...is non-standard and is not on a standards track. Ref.
It originated in Internet Explorer and there is also an implementation for it in Safari. An unofficial draft implementation can be found on github.
At its core, this feature is intended to allow user to change the way the layout is rendered, sacrificing pixel-perfect graphics for either readability (zoom-in) or birds-eye view over the entire page (zoom-out).
Implementation is largely at the liberty of browser manufacturers, leaving room for significant inconsistencies between how different browsers apply it and, in conclusion, web developers should not consider it when designing content.
Content should be designed at zoom level 100%. Results at any other zoom level are not and should not be guaranteed.
Most importantly, browser manufacturers may (and most do) choose to apply zoom at a level unavailable to the page itself and there is no cross-browser API to determine current zoom level.
That being said, without any guarantees, here's a snippet that seems to prevent zooming the page via Ctrl++, Ctrl+- and Ctrl+0, as well as Ctrl + Mouse wheel events.
function stopWheelZoom(event) {
if (event.ctrlKey == true) {
event.preventDefault();
if (event.wheelDelta > 0) {
console.log('Up');
} else {
console.log('Down');
}
}
}
function stopKeyZoom(event) {
if (event.ctrlKey) {
console.log(event.keyCode);
if (event.keyCode == 107 || event.keyCode == 187 || event.keyCode == 61) {
event.preventDefault();
console.log('Up')
}
if (event.keyCode == 109 || event.keyCode == 189) {
event.preventDefault();
console.log('Down')
}
if (event.keyCode == 96 || event.keyCode == 48) {
event.preventDefault();
console.log('Reset');
}
}
}
document.addEventListener("keydown", stopKeyZoom);
document.addEventListener('mousewheel', stopWheelZoom);
document.addEventListener('DOMMouseScroll', stopWheelZoom);testI've written it for Chrome, on Linux. I'll test it in other browsers and see if it needs adjustments/exceptions. AFAIK, Mozilla changes zoom above page level and there's no way to stop a Ctrl + +/- combo in it.
Also note you need to click in the snippet <iframe> for it to get focus and the script to work properly. For better testing I recommend you test it in a web page, not inside an <iframe>.
A rather important note is this script does not prevent CSS zoom from working. It simply disables the usual controls for it. If a user changes the key combination for zooming, this script will not prevent zooming. That's not technically possible cross-browser, because, as stated above, there is no way to determine current browser zoom level from a page script, nor to disable or block the actual script changing page zoom level.
Another, quite dreadful approach is to determine zoom level (not currently possible in Opera or Safari) and set the <body>'s width and transform: scale(n) properties to counter the effect, on window's resize event, which is triggered on user zoom. I personally consider it so wrong that I'm not even considering providing a script for it.
Try this
$(window).bind('mousewheel DOMMouseScroll', function(event) {
if(event.ctrlKey == true)
{
event.preventDefault();
if(event.originalEvent.detail > 0) {
console.log('Down');
}else {
console.log('Up');
}
}
});
