it-swarm.com.ru

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

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

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

Я старался:

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

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

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

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


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

56
Basj

Вы можете отключить масштабирование в браузере с помощью 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/

29
Vijay Dhanvai

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


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

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


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

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

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

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

Код 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>
8
thunder

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

Три из пяти основных браузеров позволяют вам видеть уровень масштабирования браузера, более того, если браузер будет увеличен, происходит событие 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 */

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

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

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

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

5
David

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

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

3
Andrei Gordiichuk

Это просто:

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>

2
B. Colin Tim

Вставьте следующее в ваш 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>
1
Jeremy Levett
$(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();
               }

      });
  })
1
Shanu Shaji

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

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

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

0
rfornal