Подтвердить что ты не робот

Предотвращение трансфокатора масштабирования

Для картографического инструмента я хотел бы отключить функцию масштабирования браузера. (Я знаю, что это, как правило, плохая идея, но для определенного веб-сайта это необходимо).

Я сделал это успешно, прослушивая сочетание клавиш CTRL +/CTRL - и добавляя e.preventDefault() и т.д. Но это не мешает изменять масштаб из меню браузера Zoom.

Я пробовал:

  • с CSS: zoom: reset; Он работает для Chrome (см. эту страницу для рабочего примера), но это не работает на Firefox.

  • в различных вопросах/ответах, я также нашел

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    но это, похоже, работает только для мобильных устройств.

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

4b9b3361

ОТВЕТЫ

Ответ 1

Вы можете отключить масштабирование в браузере с помощью Ctrl + или Ctrl- или с помощью клавиши Ctrl + колесико мыши. Вверх или вниз по этому коду.

$(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();
       }
});

Проверьте демо здесь http://jsfiddle.net/VijayDhanvai/4m3z3knd/

Ответ 2

Я действительно не нашел "авторитетного" ответа, означающего четкое утверждение от разработчиков браузеров. Однако все ответы на похожие вопросы, которые я нашел (например, этот или тот), предполагают одно и то же: функция масштабирования браузера существует для удобства пользователей, а некоторые браузеры (например, Firefox) просто не позволяют вам, так как создатель веб-сайта, чтобы отобрать у них эту опцию.

Эта документация может пролить некоторый свет на то, почему разрешение авторам отключать масштабирование может быть хорошей идеей для мобильных устройств, но не для настольных компьютеров.

Короче говоря, вам может потребоваться предотвратить автоматическое увеличение вашего сайта на мобильных устройствах, если вы знаете, что рассчитанное автоматическое увеличение будет неуместным. На настольных компьютерах нет автоматического масштабирования, поэтому, когда пользователи заходят на ваш сайт, они видят его именно так, как и предполагалось. Если они затем решат, что им нужно увеличить страницу, нет веских причин, чтобы позволить вам не делать этого.

Что касается решений, которые вы перечислили:

  • zoom - нестандартное свойство, не поддерживаемое Firefox, и
  • <meta name="viewport"> касается только устройств, на которых видовой экран макета и визуальный видовой экран не одно и то же, то есть мобильных устройств.

Ответ 3

Я думаю, что вы можете сделать, послушать событие масштабирования браузера (ctrl + "+" ), а затем проверить на window.devicePixelRatio.

Затем, соответственно, примените преобразование шкалы HTML5 на элементе тела, чтобы уменьшить масштаб на тот же коэффициент. Таким образом, в основном вы не можете предотвратить функциональность, но можете применить отрицательный эффект с одинаковой величиной.

Код POC:

 <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>

Ответ 4

Итак, как уже упоминалось, это действительно невозможно. Тем не менее, есть некоторые способы, которыми вы можете быть умны в этом.

Три из пяти основных браузеров позволяют вам видеть уровень масштабирования браузера, более того, если браузер масштабируется, происходит событие window.onresize.

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 */

Я думаю, что материал после ИЛИ работает на основе чего-то, что я заметил, когда возился. Первые, которые я знаю, работают, по крайней мере, в последней версии каждого. Обратите внимание, что Safari и Opera оба имеют devicePixelRatio, однако оба никогда не меняются. Это всегда только 1.

Вышесказанное - ваш простой способ, если вам все равно. Если вы это сделаете, то можете попробовать скрипт обнаружения увеличения, с которым я столкнулся при поиске решений для Safari и Opera.

Итак, теперь вы можете получить уровень масштабирования, а затем сместить масштаб до уровня, где он ничего не делает. Поэтому, если я заставлю свой браузер увеличить изображение на 50%, вы просто перейдете на 200%. Таким образом, без изменений. Конечно, это будет немного сложнее, вам нужно будет сохранить последний масштаб браузера, новый масштаб браузера и выполнить немного более сложную математику, но в зависимости от того, что у вас уже есть, это должно быть проще простого.

Другая идея может состоять в том, чтобы просто прослушать событие изменения размера и вычислить его на основе нового видимого размера, но это может вызвать проблемы, если размер окна только что изменился. Я думаю, что вышеупомянутое будет вашим лучшим вариантом, возможно, с резервным alert чтобы предупредить пользователя не увеличивать при необходимости.

Ответ 5

Я обновил код Виджай код:

$(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) для настольных браузеров.

Ответ 6

Это просто:

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;
    }
  }
}
p {
  display: block;
  background-color: #eeeeee;
  height: 100px;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Mousewheel control!</title>
  </head>
  <body onload="load()">
    <p>If your Mouse is in this Box, you can't zoom.</p>
  </body>
</html>

Ответ 7

$(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();
               }

      });
  })

Ответ 8

Вставьте следующее в ваш HTML:

Для мобильных телефонов: вставьте тег <head>... </head>.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">

Для кросс-браузеров: вставьте сразу после начального тега <body>....

<script>
  document.body.addEventListener("wheel", e=>{
    if(e.ctrlKey)
      event.preventDefault();//prevent zoom
  });
</script>

Ответ 9

Ты пытался...

$("body").css({
     "-moz-transform":"scale(1)",
     "-webkit-transform":"scale(1)",
     "-o-transform":"scale(1)",
     "-ms-transform":"scale(1)"
});

Я использовал этот тип кода, чтобы установить или переустановить масштаб.