Обнаружение изменения масштаба страницы с помощью jQuery в Safari

У меня проблема с Safari в веб-приложении, которое содержит позицию: фиксированный элемент. Когда страница уменьшена (меньше 100%), все ломается, и ее нужно будет исправить, вызвав функцию. Поэтому я хотел бы определить масштабирование пользователя. Я нашел этот jQueryPlug-некоторое время назад:

http://mlntn.com/2008/12/11/javascript-jquery-zoom-event-plugin/

http://mlntn.com/demos/jquery-zoom/

Он обнаруживает события клавиатуры и мыши, которые могут привести к изменению уровня масштабирования страницы. Справедливо. Он работает с текущими FF и IE, но не с Safari. Любые идеи, что можно сделать, чтобы сделать что-то похожее в текущих браузерах WebKit?

Ответы

Ответ 1

Это не прямой дубликат этого вопроса, поскольку это касается Mobile Safari, но это же решение будет работать.

Когда вы увеличиваете масштаб, устанавливается window.innerWidth, но document.documentElement.clientWidth нет, поэтому:

var zoom = document.documentElement.clientWidth / window.innerWidth;

Кроме того, вы должны иметь возможность использовать обработчик событий onresize (или jQuery .resize()) для проверки:

var zoom = document.documentElement.clientWidth / window.innerWidth;
$(window).resize(function() {
    var zoomNew = document.documentElement.clientWidth / window.innerWidth;
    if (zoom != zoomNew) {
        // zoom has changed
        // adjust your fixed element
        zoom = zoomNew
    }
});

Ответ 2

Существует отличный плагин, построенный из yonran, который может выполнять обнаружение. Вот его предыдущий вопрос ответил на StackOverflow. Он работает для большинства браузеров. Приложение так же просто, как это:

window.onresize = function onresize() {
  var r = DetectZoom.ratios();
  zoomLevel.innerHTML =
    "Zoom level: " + r.zoom +
    (r.zoom !== r.devicePxPerCssPx
        ? "; device to CSS pixel ratio: " + r.devicePxPerCssPx
        : "");
}

Демо

Ответ 3

srceen.width - фиксированное значение, но при изменении значения window.innerWidth в зависимости от эффекта масштабирования. пожалуйста, попробуйте приведенный ниже код:

 $(window).resize(function() {
   if(screen.width == window.innerWidth){
       alert("you are on normal page with 100% zoom");
   } else if(screen.width > window.innerWidth){
       alert("you have zoomed in the page i.e more than 100%");
   } else {
       alert("you have zoomed out i.e less than 100%");
   }
});