Jak wykryć poziom powiększenia strony we wszystkich nowoczesnych przeglądarkach?

Dla mnie, dla Chrome / Webkit, document.width / jQuery(document).width() nie działa. Kiedy zrobiłem małe okno i powiększyłem witrynę tak, że pojawiły się poziome paski przewijania, document.width / jQuery(document).width() nie równa się 1 przy domyślnym powiększeniu. Dzieje się tak, ponieważ document.width zawiera część dokumentu poza widokami.

Używając window.innerWidth i window.outerWidth zadziałało. Z jakiegoś powodu w Chrome szerokość zewnętrzna jest mierzona w pikselach ekranu, a wewnętrzna jest mierzona w pikselach css.

var screenCssPixelRatio = (window.outerWidth - 8) / window.innerWidth;
if (screenCssPixelRatio >= .46 && screenCssPixelRatio <= .54) {
  zoomLevel = "-4";
} else if (screenCssPixelRatio <= .64) {
  zoomLevel = "-3";
} else if (screenCssPixelRatio <= .76) {
  zoomLevel = "-2";
} else if (screenCssPixelRatio <= .92) {
  zoomLevel = "-1";
} else if (screenCssPixelRatio <= 1.10) {
  zoomLevel = "0";
} else if (screenCssPixelRatio <= 1.32) {
  zoomLevel = "1";
} else if (screenCssPixelRatio <= 1.58) {
  zoomLevel = "2";
} else if (screenCssPixelRatio <= 1.90) {
  zoomLevel = "3";
} else if (screenCssPixelRatio <= 2.28) {
  zoomLevel = "4";
} else if (screenCssPixelRatio <= 2.70) {
  zoomLevel = "5";
} else {
  zoomLevel = "unknown";
}

Możesz spróbować

var browserZoomLevel = Math.round(window.devicePixelRatio * 100);

To da ci procentowy poziom powiększenia przeglądarki.

Aby złapać Zdarzenie zoom, możesz użyć

$(window).resize(function() { 
// your code 
});

Mój współpracownik i ja użyliśmy skryptu z https://github.com/tombigel/detect-zoom . dodatkowo dynamicznie stworzyliśmy element svg i sprawdziliśmy jego właściwość currentScale. Działa świetnie na Chrome i prawdopodobnie większości przeglądarek. Na FF funkcja "zoom text only" musi być jednak wyłączona. SVG jest obsługiwane w większości przeglądarek. W momencie pisania tego tekstu testowany na IE10, Ff19 i Chrome28.

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('version', '1.1');
document.body.appendChild(svg);
var z = svg.currentScale;
... more code ...
document.body.removeChild(svg);

Uważam ten artykuł za niezwykle pomocny. Wielkie podziękowania dla yonran. Chciałem przekazać trochę dodatkowej nauki, którą znalazłem podczas wdrażania niektórych technik, które dostarczył. W FF6 i Chrome 9 dodano obsługę zapytań o media z JS, co może znacznie uprościć podejście do zapytań o media niezbędne do określenia powiększenia w FF. Zobacz dokumenty w MDN Tutaj . Do moich celów musiałem tylko wykryć, czy przeglądarka została powiększona, czy pomniejszona, nie miałem potrzeby rzeczywistego współczynnika powiększenia. I był w stanie uzyskać moją odpowiedź z jednej linii JavaScript:

var isZoomed = window.matchMedia('(max--moz-device-pixel-ratio:0.99), (min--moz-device-pixel-ratio:1.01)').matches;

Łącząc to z rozwiązaniami IE8+ i Webkit, które były również pojedynczymi liniami, byłem w stanie wykryć zoom na zdecydowanej większości przeglądarek uderzających w naszą aplikację za pomocą zaledwie kilku linii kodu.

zoom = ( window.outerWidth - 10 ) / window.innerWidth

W przeglądarce Internet Explorer 7, 8 i 9 działa to:

function getZoom() {
    var screen;

    screen = document.frames.screen;
    return ((screen.deviceXDPI / screen.systemXDPI) * 100 + 0.9).toFixed();
}

"+ 0.9 " jest dodawany, aby zapobiec błędom zaokrąglania (w przeciwnym razie otrzymasz 104% i 109%, gdy zoom przeglądarki jest ustawiony na odpowiednio 105% i 110%).

W IE6 zoom nie istnieje, więc nie ma potrzeby sprawdzania zoomu.

To działało dla mnie świetnie w przeglądarkach opartych na webkit (Chrome, Safari):

function isZoomed() {
    var width, mediaQuery;

    width = document.body.clientWidth;
    mediaQuery = '(max-width: ' + width + 'px) and (min-width: ' + width + 'px)';

    return !window.matchMedia(mediaQuery).matches;
}

Wygląda na to, że nie działa w Firefoksie.

Działa to również w WebKit:

var zoomLevel = document.width / document.body.clientWidth;

Mam na to rozwiązanie od stycznia 2016. Przetestowano pracę w przeglądarkach Chrome, Firefox i MS Edge.

Zasada jest następująca. Zbierz 2 punkty MouseEvent, które są daleko od siebie. Każde zdarzenie myszy ma współrzędne ekranu i dokumentu. Zmierz odległość między dwoma punktami w obu układach współrzędnych. Chociaż ze względu na układ współrzędnych istnieją zmienne przesunięcia stałe, to odległość między punktami powinna być identyczna, jeśli strona nie jest powiększona. Powodem określenia "daleko od siebie" (umieszczam to jako 12 pikseli) jest to, że małe zmiany zoomu (np. 90% lub 110%) są wykrywalne.

Odniesienie: https://developer.mozilla.org/en/docs/Web/Events/mousemove

Kroki:

1. Dodaj słuchacza ruchu myszy

   window.addEventListener("mousemove", function(event) {
       // handle event
   });
   

2. Przechwytywanie 4 pomiarów ze zdarzeń myszy:

   event.clientX, event.clientY, event.screenX, event.screenY
   

3. Zmierz odległość d_c między 2 punktami w kliencie system

4. Zmierz odległość d_s między 2 punktami w systemie ekranowym

5. If d_c != d_s następnie stosuje się zoom. Różnica między nimi mówi o wielkości powiększenia.

Uwaga: obliczenia odległości wykonuje się tylko rzadko, np. gdy można spróbować nowego zdarzenia myszy, które jest dalekie od poprzedniego.

Ograniczenia: zakłada, że użytkownik poruszy myszką co najmniej trochę, a zoom do tego czasu nie jest znany.

To co wymyśliłem to:

1) Make a position:fixed <div> z width:100% (id=zoomdiv)

2) gdy Strona się ładuje:

zoomlevel=$("#zoomdiv").width()*1.0 / screen.availWidth

I zadziałało dla ctrl+ i ctrl- powiększeń.

Lub Mogę dodać linię do zdarzenia $(window).onresize(), aby uzyskać aktywny poziom powiększenia

Kod:

<script>
    var zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;

    $(window).resize(function(){
        zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;
        alert(zoom);    
    });
</script>
<body>
    <div id=zoomdiv style="width:100%;position:fixed;"></div>
</body>

P. S.: to mój pierwszy post, przepraszam za błędy

Na urządzeniach mobile (z Chrome dla Androida lub Opera Mobile) można wykryć zoom przez okno .visualViewport.scale . https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API

Wykryj w Safari: Dokument.documentElement.clientWidth / window.innerWidth (zwraca 1, jeśli nie ma powiększenia urządzenia).

Twoje obliczenia są nadal oparte na liczbie pikseli CSS. Mają teraz inny rozmiar na ekranie. To jest punkt pełnego powiększenia strony.

Co chciałbyś zrobić w przeglądarce na urządzeniu 192dpi, które w związku z tym zwykle wyświetla cztery piksele urządzenia dla każdego piksela obrazu? Przy 50% powiększeniu to urządzenie wyświetla teraz jeden piksel obrazu w jednym pikselu urządzenia.

Nie testowałem tego dla IE, ale jeśli tworzysz element elem z

min-width: 100%

Then

window.document.width / elem.clientWidth

Daje poziom powiększenia przeglądarki (w tym współczynnik document.body.style.zoom).

To jest dla Chrome , w ślad za user800583 odpowiedz ...

Spędziłem kilka godzin nad tym problemem i nie znalazłem lepszego podejścia, ale:

• istnieje 16 'zoomLevel' a nie 10
• gdy Chrome jest pełnoekranowy / zmaksymalizowany, współczynnik wynosi window.outerWidth/window.innerWidth, a gdy nie jest, współczynnik wydaje się być (window.outerWidth-16)/window.innerWidth, jednak do pierwszego przypadku można podejść przez drugi.

Ale takie podejście ma ograniczenia: na przykład, jeśli odtwarzasz akordeon z oknem aplikacji (szybko powiększasz i zmniejszasz szerokość okna), pojawią się przerwy między poziomami powiększenia, chociaż zoom się nie zmienił (może to być outerWidth i innerWidth nie są dokładnie aktualizowane w tym samym czasie).

var snap = function (r, snaps)
{
    var i;
    for (i=0; i < 16; i++) { if ( r < snaps[i] ) return i; }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
            [ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
);

A jeśli chcesz czynnik:

var snap = function (r, snaps, ratios)
{
    var i;
    for (i=0; i < 16; i++) { if ( r < snaps[i] ) return eval(ratios[i]); }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
            [ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
            [ 0.25, '1/3', 0.5, '2/3', 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4, 5 ]
);

Mam takie rozwiązanie dla tylko dla urządzeń mobilnych (testowane z Androidem):

jQuery(function($){

zoom_level = function(){

    $("body").prepend('<div class="overlay" ' +
                'style="position:fixed; top:0%; left:0%; ' +
                'width:100%; height:100%; z-index:1;"></div>');

    var ratio = $("body .overlay:eq(0)").outerWidth() / $(window).width();
    $("body .overlay:eq(0)").remove();

    return ratio;
}

alert(zoom_level());

});

Jeśli chcesz poziom powiększenia zaraz po ruchu szczypty, prawdopodobnie będziesz musiał ustawić mały timeout z powodu opóźnienia renderowania(ale nie jestem pewien, ponieważ nie testowałem go).

function supportFullCss3()
{
    var div = document.createElement("div");
    div.style.display = 'flex';
    var s1 = div.style.display == 'flex';
    var s2 = 'perspective' in div.style;

    return (s1 && s2);
};

function getZoomLevel()
{
    var screenPixelRatio = 0, zoomLevel = 0;

    if(window.devicePixelRatio && supportFullCss3())
        screenPixelRatio = window.devicePixelRatio;
    else if(window.screenX == '0')
        screenPixelRatio = (window.outerWidth - 8) / window.innerWidth;
    else
    {
        var scr = window.frames.screen;
        screenPixelRatio = scr.deviceXDPI / scr.systemXDPI;
    }

    //---------------------------------------
    if (screenPixelRatio <= .11){ //screenPixelRatio >= .01 &&
      zoomLevel = "-7";
    } else if (screenPixelRatio <= .25) {
      zoomLevel = "-6";
    }else if (screenPixelRatio <= .33) {
      zoomLevel = "-5.5";
    } else if (screenPixelRatio <= .40) {
      zoomLevel = "-5";
    } else if (screenPixelRatio <= .50) {
      zoomLevel = "-4";
    } else if (screenPixelRatio <= .67) {
      zoomLevel = "-3";
    } else if (screenPixelRatio <= .75) {
      zoomLevel = "-2";
    } else if (screenPixelRatio <= .85) {
      zoomLevel = "-1.5";
    } else if (screenPixelRatio <= .98) {
      zoomLevel = "-1";
    } else if (screenPixelRatio <= 1.03) {
      zoomLevel = "0";
    } else if (screenPixelRatio <= 1.12) {
      zoomLevel = "1";
    } else if (screenPixelRatio <= 1.2) {
      zoomLevel = "1.5";
    } else if (screenPixelRatio <= 1.3) {
      zoomLevel = "2";
    } else if (screenPixelRatio <= 1.4) {
      zoomLevel = "2.5";
    } else if (screenPixelRatio <= 1.5) {
      zoomLevel = "3";
    } else if (screenPixelRatio <= 1.6) {
      zoomLevel = "3.3";
    } else if (screenPixelRatio <= 1.7) {
      zoomLevel = "3.7";
    } else if (screenPixelRatio <= 1.8) {
      zoomLevel = "4";
    } else if (screenPixelRatio <= 1.9) {
      zoomLevel = "4.5";
    } else if (screenPixelRatio <= 2) {
      zoomLevel = "5";
    } else if (screenPixelRatio <= 2.1) {
      zoomLevel = "5.2";
    } else if (screenPixelRatio <= 2.2) {
      zoomLevel = "5.4";
    } else if (screenPixelRatio <= 2.3) {
      zoomLevel = "5.6";
    } else if (screenPixelRatio <= 2.4) {
      zoomLevel = "5.8";
    } else if (screenPixelRatio <= 2.5) {
      zoomLevel = "6";
    } else if (screenPixelRatio <= 2.6) {
      zoomLevel = "6.2";
    } else if (screenPixelRatio <= 2.7) {
      zoomLevel = "6.4";
    } else if (screenPixelRatio <= 2.8) {
      zoomLevel = "6.6";
    } else if (screenPixelRatio <= 2.9) {
      zoomLevel = "6.8";
    } else if (screenPixelRatio <= 3) {
      zoomLevel = "7";
    } else if (screenPixelRatio <= 3.1) {
      zoomLevel = "7.1";
    } else if (screenPixelRatio <= 3.2) {
      zoomLevel = "7.2";
    } else if (screenPixelRatio <= 3.3) {
      zoomLevel = "7.3";
    } else if (screenPixelRatio <= 3.4) {
      zoomLevel = "7.4";
    } else if (screenPixelRatio <= 3.5) {
      zoomLevel = "7.5";
    } else if (screenPixelRatio <= 3.6) {
      zoomLevel = "7.6";
    } else if (screenPixelRatio <= 3.7) {
      zoomLevel = "7.7";
    } else if (screenPixelRatio <= 3.8) {
      zoomLevel = "7.8";
    } else if (screenPixelRatio <= 3.9) {
      zoomLevel = "7.9";
    } else if (screenPixelRatio <= 4) {
      zoomLevel = "8";
    } else if (screenPixelRatio <= 4.1) {
      zoomLevel = "8.1";
    } else if (screenPixelRatio <= 4.2) {
      zoomLevel = "8.2";
    } else if (screenPixelRatio <= 4.3) {
      zoomLevel = "8.3";
    } else if (screenPixelRatio <= 4.4) {
      zoomLevel = "8.4";
    } else if (screenPixelRatio <= 4.5) {
      zoomLevel = "8.5";
    } else if (screenPixelRatio <= 4.6) {
      zoomLevel = "8.6";
    } else if (screenPixelRatio <= 4.7) {
      zoomLevel = "8.7";
    } else if (screenPixelRatio <= 4.8) {
      zoomLevel = "8.8";
    } else if (screenPixelRatio <= 4.9) {
      zoomLevel = "8.9";
    } else if (screenPixelRatio <= 5) {
      zoomLevel = "9";
    }else {
      zoomLevel = "unknown";
    }

    return zoomLevel;
};

Zasadniczo mamy:

• window.devicePixelRatio, który uwzględnia zarówno zoom na poziomie przeglądarki*, jak i gęstość zoomu / pikseli systemowych.
  * - na Mac/Safari poziom powiększenia nie jest brany pod uwagę
• media queries
• vw/vh jednostki CSS
• resize zdarzenie, które jest wywoływane przy zmianie poziomu powiększenia, powoduje efektywną zmianę rozmiaru okna

To powinno wystarczyć dla normalnego UX. Jeśli chcesz wykryć poziom powiększenia, który może być znakiem złego projektu interfejsu użytkownika.

Pitch-zoom jest trudniejszy do śledzenia i nie jest obecnie brany pod uwagę.

Ta odpowiedź jest oparta na komentarzach dotyczących devicePixelRatio wracających niepoprawnie na odpowiedź user1080381.

Odkryłem, że to polecenie wracało nieprawidłowo w niektórych przypadkach również podczas pracy z komputerem stacjonarnym, Surface Pro 3 i Surface Pro 4.

Znalazłem to, że działa na moim pulpicie, ale SP3 i SP4 dawały różne numery od siebie i pulpitu.

Zauważyłem jednak, że SP3 wraca jako 1,5 raza wyższy poziom zoomu I spodziewałam się. Kiedy spojrzałem na ustawienia wyświetlacza, SP3 został faktycznie ustawiony na 150% zamiast 100%, które miałem na pulpicie.

Tak więc, rozwiązaniem dla komentarzy powinno być podzielenie zwróconego poziomu powiększenia przez skalę maszyny, na której aktualnie się znajdujesz.

Udało mi się uzyskać skalę w ustawieniach systemu Windows, wykonując następujące czynności:

ManagementObjectSearcher searcher = new ManagementObjectSearcher("SELECT * FROM Win32_DesktopMonitor");
double deviceScale = Convert.ToDouble(searcher.Get().OfType<ManagementObject>().FirstOrDefault()["PixelsPerXLogicalInch"]);
int standardPixelPerInch = 96;
return deviceScale / standardPixelPerInch;

Więc w przypadku mojego SP3 tak wygląda ten kod przy 100% powiększeniu:

devicePixelRatio = 1.5
deviceScale = 144
deviceScale / standardPixelPerInch = 1.5
devicePixelRatio / (deviceScale / standardPixelPerInch) = 1

Mnożenie przez 100 w oryginalna odpowiedź user1080381 dałaby Ci zoom 100 (%).

Problem tkwi w typach używanych monitorów, monitorze 4k vs monitorze standardowym. Chrome jest zdecydowanie najmądrzejszy w stanie powiedzieć nam, jaki jest poziom powiększenia, używając window.devicePixelRatio, najwyraźniej może powiedzieć, jaka jest gęstość pikseli i zgłasza tę samą liczbę, aby mieć znaczenie.

Inne przeglądarki, nie za bardzo. IE i Edge są Prawdopodobnie najgorsze, ponieważ radzą sobie z poziomami zoomu znacznie inaczej. Aby uzyskać ten sam rozmiar tekstu na monitorze 4k, musisz wybrać 200%, zamiast 100% na standardowy monitor.

Od maja 2018 roku, oto, co muszę wykryć poziomy powiększenia dla kilku najpopularniejszych przeglądarek, Chrome, Firefox i IE11. Powiedz mi, jaki jest procent powiększenia. W przypadku IE raportuje 100% nawet dla monitorów 4k, które są w rzeczywistości w 200%, ale rozmiar tekstu jest naprawdę taki sam.

Oto skrzypce: https://jsfiddle.net/ae1hdogr/

Jeśli ktoś chciałby zajrzeć do innych przeglądarek i zaktualizować fiddle ' A, proszę to zrobić. My głównym celem było uzyskanie tych przeglądarek 3, aby wykryć, czy ludzie używali współczynnika powiększenia większego niż 100%, aby korzystać z mojej aplikacji internetowej i wyświetlić powiadomienie sugerujące współczynnik powiększenia leasingodawcy.

Tutaj to się nie zmienia!:

<html>
 <head>
  <title></title>
 </head>
<body>
 <div id="xy" style="width:400px;">
  foobar
 </div>
 <div>
  <button onclick="alert(document.getElementById('xy').style.width);">Show</button>
 </div>
</body>
</html>

Utwórz prosty plik html, kliknij przycisk. niezależnie od tego, jaki poziom powiększenia: pokaże Ci szerokość 400px (przynajmniej w Firefoksie i ie8)

To może komuś pomóc lub nie, ale miałem stronę, której nie mogłem poprawnie dostać się do centrum bez względu na to, jakie sztuczki Css próbowałem, więc napisałem stronę call Center pliku JQuery:

Wystąpił problem z poziomem powiększenia przeglądarki, strona zmieniałaby się w zależności od tego, czy masz 100%, 125%, 150% itp.

Poniższy kod znajduje się w pliku jQuery o nazwie centerpage.js.

Z mojej strony musiałem linkować do JQuery i tego pliku, aby to działało, mimo że moja strona wzorcowa miała już link do JQuery.

<title>Home Page.</title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/centerpage.js"></script>

centerpage.js:

// centering page element
function centerPage() {
    // get body element
    var body = document.body;

    // if the body element exists
    if (body != null) {
        // get the clientWidth
        var clientWidth = body.clientWidth;

        // request data for centering
        var windowWidth = document.documentElement.clientWidth;
        var left = (windowWidth - bodyWidth) / 2;

        // this is a hack, but it works for me a better method is to determine the 
        // scale but for now it works for my needs
        if (left > 84) {
            // the zoom level is most likely around 150 or higher
            $('#MainBody').removeClass('body').addClass('body150');
        } else if (left < 100) {
            // the zoom level is most likely around 110 - 140
            $('#MainBody').removeClass('body').addClass('body125');
        }
    }
}


// CONTROLLING EVENTS IN jQuery
$(document).ready(function() {
    // center the page
    centerPage();
});

Również jeśli chcesz wyśrodkować panel:

// centering panel
function centerPanel($panelControl) {
    // if the panel control exists
    if ($panelControl && $panelControl.length) {
        // request data for centering
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
        var panelHeight = $panelControl.height();
        var panelWidth = $panelControl.width();

        // centering
        $panelControl.css({
            'position': 'absolute',
            'top': (windowHeight - panelHeight) / 2,
            'left': (windowWidth - panelWidth) / 2
        });

        // only need force for IE6
        $('#backgroundPanel').css('height', windowHeight);
    }
}

To pytanie zostało opublikowane jak wieki temu, ale dzisiaj, kiedy szukałem tej samej odpowiedzi "jak wykryć Zdarzenie powiększania i wyłączania", nie mogłem znaleźć jednej odpowiedzi, która pasowałaby do wszystkich przeglądarek.

Jak teraz: dla Firefoksa / Chrome / IE8 i IE9 zoom in and out uruchamia okno.Zmień rozmiar zdarzenia. Można to uchwycić za pomocą:

$(window).resize(function() {
//YOUR CODE.
});

W Firefoksie 16+ można znaleźć DPPX (zoom level) wyłącznie za pomocą JavaScript:

var dppx = (function (precision) {
  var searchDPPX = function(level, min, divisor) {
    var wmq = window.matchMedia;
    while (level >= min && !wmq("(min-resolution: " + (level/divisor) + "dppx)").matches) {
      level--;
    }
    return level;
  };

  var maxDPPX = 5.0; // Firefox 22 has 3.0 as maximum, but testing a bit greater values does not cost much
  var minDPPX = 0.1; // Firefox 22 has 0.3 as minimum, but testing a bit smaller values does not cost anything
  var divisor = 1;
  var result;
  for (var i = 0; i < precision; i++) {
    result = 10 * searchDPPX (maxDPPX, minDPPX, divisor);
    maxDPPX = result + 9;
    minDPPX = result;
    divisor *= 10;
  }

  return result / divisor;
}) (5);