предотвратить зум кросс-браузер

<p>для инструмента, подобного карте, я бы хотел <strong> отключить функцию масштабирования браузера </strong>. <em> (я знаю, что это, как правило, плохая идея, но для какого-то конкретного сайта это необходимо). </em></p><p>я сделал это успешно, слушая сочетание клавиш <kbd>ctrl</kbd> <kbd>+</kbd> / <kbd>ctrl</kbd> <kbd>-</kbd> и добавление <code>e.preventdefault()</code> и т. д. <em> но это не мешает изменять масштаб изображения в меню "масштаб" браузера. </em></p><p>я старался:</p><ul> <li> <p>с css: <code>zoom: reset;</code> это работает для chrome (см. <a href="http://gget.it/eionjtdo/disable\_zoom.html">эта страница для рабочего примера</a> ), но совсем не работает в firefox.</p> </li> <li> <p>в разных вопросах/ответах я тоже нашел</p> <p><code><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"></code></p> <p>но это, кажется, работает только для мобильных устройств.</p> </li> </ul><hr><p><strong> как предотвратить масштабирование кросс-браузер? </strong></p>

<p>вы можете отключить масштабирование в браузере с помощью ctrl + или ctrl- или с помощью клавиши ctrl + колесико мыши вверх или вниз по этому коду. </p><pre><code>$(document).keydown(function(event) { if (event.ctrlkey==true && (event.which == '61' || event.which == '107' || event.which == '173' || event.which == '109' || event.which == '187' || event.which == '189' ) ) { event.preventdefault(); } // 107 num key + // 109 num key - // 173 min key hyphen/underscor hey // 61 plus key +/= key }); $(window).bind('mousewheel dommousescroll', function (event) { if (event.ctrlkey == true) { event.preventdefault(); } }); </code></pre><p>проверьте демо здесь <a href="http://jsfiddle.net/vijaydhanvai/4m3z3knd/">http://jsfiddle.net/vijaydhanvai/4m3z3knd/</a> </p>

<p>я думаю, что вы можете сделать, это прослушать событие масштабирования браузера (ctrl + "+"), а затем проверить для window.devicepixelratio.</p><p>затем, соответственно, примените преобразование масштаба html5 к элементу body, чтобы уменьшить его на тот же коэффициент. таким образом, в принципе вы не можете предотвратить функциональность, но вы можете применить отрицательный эффект с той же величиной.</p><p>код poc:</p><pre><code> <body style="position: absolute;margin: 0px;"> <div style="width: 300px; height: 200px; border: 1px solid black;"> something is written here </div> <script> var keyincrease = [17, 61]; var keydecrease = [17, 173]; var keydefault = [17, 48]; var listenmultikeypress = function(keys, callback){ var keyon = []; for(var i=0; i<keys.length; i++){ keyon[i] = false; } addeventlistener('keydown', function(e){ var keycode = e.which; console.log(keycode); var idx = keys.indexof(keycode); if(idx!=-1){ keyon[idx] = true; } console.log(keyon); for(var i=0; i<keyon.length; i++){ if(!keyon[i]){ return; } } settimeout(callback, 100); }); addeventlistener('keyup', function(e){ var keycode = e.which; var idx = keys.indexof(keycode); if(idx!=-1){ keyon[idx] = false; } console.log(keyon); }); }; var previousscale = 1; var previousdevicepixelratio; var neutralizezoom = function(){ //alert('caught'); var scale = 1/window.devicepixelratio; document.body.style.transform = 'scale('+(1/previousscale)+')'; document.body.style.transform = 'scale('+scale+')'; var widthdiff = parseint(getcomputedstyle(window.document.body).width)*(scale-1); var heightdiff = parseint(getcomputedstyle(window.document.body).height)*(scale-1); document.body.style.left = widthdiff/2 + 'px'; document.body.style.top = heightdiff/2 + 'px'; previousscale = scale; }; listenmultikeypress(keyincrease, neutralizezoom); listenmultikeypress(keydecrease, neutralizezoom); listenmultikeypress(keydefault, neutralizezoom); neutralizezoom(); </script> </body> </html> </code></pre>

<p>итак, как уже упоминалось, это действительно невозможно. тем не менее, есть некоторые способы, которыми вы можете быть умны в этом.</p><p>три из пяти основных браузеров позволяют вам видеть уровень масштабирования браузера, более того, если браузер будет увеличен, происходит событие <a href="https://developer.mozilla.org/en-us/docs/web/api/window.onresize">window.onresize</a> . </p><pre><code>ie: event.view.devicepixelratio or window.view.devicepixelratio chrome: event.currenttarget.devicepixelratio or window.devicepixelratio firefox: event.originaltarget.devicepixelratio or window.devicepixelratio safari: /* not possible */ opera: /* not possible */ </code></pre><p>я думаю, что материал после or работает на основе того, что я заметил, когда возился. первые, которые я знаю, работают, по крайней мере, в последней версии каждого. обратите внимание, что safari и opera оба имеют <code>devicepixelratio</code>, однако оба никогда не меняются. это всегда просто <code>1</code>.</p><p>вышесказанное - ваш простой способ, если вам все равно <em>что</em>. если вы это сделаете, то можете попробовать скрипт <a href="https://github.com/tombigel/detect-zoom/blob/master/detect-zoom.js">detect-zoom</a> , с которым я столкнулся при поиске решений для safari и opera.</p><p>итак, теперь вы можете получить уровень масштабирования, а затем сместить масштаб до уровня, где он ничего не делает. поэтому, если я заставлю свой браузер увеличить изображение на 50%, вы просто перейдете на 200%. таким образом, без изменений. конечно, это будет немного сложнее, вам нужно будет сохранить последний масштаб браузера, новый масштаб браузера и выполнить немного более сложную математику, но в зависимости от того, что у вас уже есть, это должно быть проще простого. </p><p>другая идея может состоять в том, чтобы просто прослушать событие изменения размера и вычислить его на основе нового видимого размера, но это может вызвать проблемы, если размер окна только что изменился. я думаю, что вышеизложенное будет вашим лучшим вариантом, возможно, с запасным вариантом <code>alert</code>, чтобы предупредить пользователя не увеличивать при необходимости.</p>

<p>я обновил код виджай код:</p><pre><code>$(document).ready(function(){ var keycodes = [61, 107, 173, 109, 187, 189]; $(document).keydown(function(event) { if (event.ctrlkey==true && (keycodes.indexof(event.which) != -1)) { alert('disabling zooming'); event.preventdefault(); } }); $(window).bind('mousewheel dommousescroll', function (event) { if (event.ctrlkey == true) { alert('disabling zooming'); event.preventdefault(); } }); }); это решение является кросс-платформенным (os/win) для настольных браузеров.

это просто:<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override">function load(){ document.body.addeventlistener("wheel", zoomshortcut); //add the event } function zoomshortcut(e){ if(e.ctrlkey){ //[ctrl] pressed? event.preventdefault(); //prevent zoom if(e.deltay<0){ //scrolling up? //do something.. return false; } if(e.deltay>0){ //scrolling down? //do something.. return false; } } } <pre class="snippet-code-css lang-css prettyprint-override">p { display: block; background-color: #eeeeee; height: 100px; } <pre class="snippet-code-html lang-html prettyprint-override"><!doctype html>   <title>mousewheel control!</title>  <body onload="load()"> if your mouse is in this box, you can't zoom.     

вставьте следующее в ваш html:для мобильных телефонов: вставьте тег  ... </ head>.<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"> для кросс-браузеров: вставьте сразу после начального тега  ....<script> document.body.addeventlistener("wheel", e=>{ if(e.ctrlkey) event.preventdefault();//prevent zoom }); </script> 

$(document).ready(function () { $(document).keydown(function (event) { if (event.ctrlkey == true && (event.which == '107' || event.which == '109' || event.which == '187' || event.which == '189')) { event.preventdefault(); } }); $(window).bind('mousewheel dommousescroll', function (event) { if (event.ctrlkey == true) { event.preventdefault(); } }); }) </code></pre>

<p>ты пытался ...</p><pre><code> $("body").css({ "-moz-transform":"scale(1)", "-webkit-transform":"scale(1)", "-o-transform":"scale(1)", "-ms-transform":"scale(1)" }); </code></pre><p>я использовал этот тип кода, чтобы установить или переустановить масштаб.</p>