Jak mogę wykryć poziom powiększenia strony we wszystkich nowoczesnych przeglądarkach? Podczas gdy ten wątek mówi, jak to zrobić w IE7 i IE8, nie mogę znaleźć dobrego rozwiązania dla różnych przeglądarek.
Firefox przechowuje poziom powiększenia strony dla przyszłego dostępu. Czy przy pierwszym ładowaniu strony będę w stanie uzyskać poziom powiększenia? Gdzieś przeczytałem, że działa, gdy po załadowaniu strony następuje zmiana powiększenia .
Czy istnieje sposób na złapanie
'zoom'
zdarzenia?
Potrzebuję tego, ponieważ niektóre z moich obliczeń są oparte na pikselach i mogą się wahać po powiększeniu.
Zmodyfikowana próbka podana przez @tfl
Ta strona ostrzega o różnych wartościach wysokości po powiększeniu. [jsFiddle]
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"/></script>
</head>
<body>
<div id="xy" style="border:1px solid #f00; width:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin tortor in lacus tincidunt volutpat. Integer dignissim imperdiet mollis. Suspendisse quis tortor velit, placerat tempor neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent bibendum auctor lorem vitae tempor. Nullam condimentum aliquam elementum. Nullam egestas gravida elementum. Maecenas mattis molestie nisl sit amet vehicula. Donec semper tristique blandit. Vestibulum adipiscing placerat mollis.</div>
<button onclick="alert($('#xy').height());">Show</button>
</body>
</html>
javascript
browser
zoom
detection
rozumować
źródło
źródło
Odpowiedzi:
Teraz jest jeszcze większy bałagan niż wtedy, gdy zadawano to pytanie po raz pierwszy. Poniżej przeczytałem wszystkie odpowiedzi i posty na blogu, które mogłem znaleźć. Skonfigurowałem również tę stronę, aby przetestować wszystkie te metody pomiaru poziomu powiększenia .
Edycja (12.12.2011): Dodałem projekt, który można sklonować: https://github.com/tombigel/detect-zoom
screen.deviceXDPI / screen.logicalXDPI
(lub, dla poziomu powiększenia względem domyślnego,screen.systemXDPI / screen.logicalXDPI
)var body = document.body,r = body.getBoundingClientRect(); return (r.left-r.right)/body.offsetWidth;
(dzięki temu przykładowi lub tej odpowiedzi )screen.width
/ szerokość ekranu zapytania o media (patrz poniżej) (wykorzystuje fakt, żescreen.width
używa pikseli urządzenia, ale szerokość MQ używa pikseli CSS - dzięki szerokości trybu Quirksmode )-webkit-text-size-adjust:none
.document.width / jQuery(document).width()
(dzięki Dirk van Oosterbosch powyżej ). Aby uzyskać stosunek wyrażony w pikselach urządzenia (zamiast w stosunku do domyślnego powiększenia), pomnóż przezwindow.devicePixelRatio
.parseInt(getComputedStyle(document.documentElement,null).width) / document.documentElement.clientWidth
(z tej odpowiedzi )document.documentElement.offsetWidth
/ szerokośćposition:fixed; width:100%
div. stąd ( tabela szerokości Quirksmode mówi, że to błąd; wewnętrzna szerokość powinna wynosić CSS px). Używamy elementu position: fixed, aby uzyskać szerokość rzutni, w tym przestrzeń, w której znajdują się paski przewijania ; document.documentElement.clientWidth wyklucza tę szerokość. Jest to zerwane od czasu w 2011 roku; Nie wiem już, jak uzyskać poziom powiększenia w Operze.Oto wyszukiwanie binarne Firefoksa 4, ponieważ nie znam żadnej zmiennej, w której jest on ujawniony:
źródło
zoom: screen.deviceXDPI / screen.logicalXDPI,
zamiastzoom: screen.systemXDPI / screen.logicalXDPI,
matchMedia
. Paul Irish napisał również podobny polifill matchMedia, który jest częścią Modernizr .Możesz spróbować
To da ci procentowy poziom powiększenia przeglądarki na wyświetlaczach innych niż siatkówka. W przypadku wyświetlaczy o wysokiej DPI / siatkówce dawałoby to różne wartości (np. 200 dla Chrome i Safari, 140 dla Firefoxa).
Aby złapać zdarzenie powiększenia, możesz użyć
źródło
devicePixelRatio
. To również bardzo pomogło mi przełączyćfixed
element naabsolute
pozycjonowany element po wystąpieniu zdarzenia powiększenia lub gdy początkowa wartośćdevicePixelRatio
zmian. Doskonały! Dziękuję Ci!!Math.round(window.devicePixelRatio * 100)
działa w Chrome, IE, Edge i Firefox. Safari na iMac zawsze zwraca 200.Dla mnie w przypadku Chrome / Webkit
document.width / jQuery(document).width()
nie działał. Kiedydocument.width / jQuery(document).width()
zmniejszyłem okno i powiększyłem stronę tak, aby pojawiały się poziome paski przewijania, nie były równe 1 przy domyślnym powiększeniu. Jest tak, ponieważdocument.width
zawiera część dokumentu poza oknem ekranu.Korzystanie
window.innerWidth
iwindow.outerWidth
działało. Z jakiegoś powodu w Chrome zewnętrzna szerokość jest mierzona w pikselach ekranu, a wewnętrzna szerokość w pikselach css.źródło
isZoomed = (screenCssPixelRatio < .98 || screenCssPixelRatio > 1.02)
switch
instrukcja może być lepsza niż wiele instrukcji if, jeśli.Mój współpracownik i ja użyliśmy skryptu z https://github.com/tombigel/detect-zoom . Ponadto dynamicznie utworzyliśmy element svg i sprawdziliśmy jego właściwość currentScale. Działa świetnie w Chrome i prawdopodobnie w większości przeglądarek. W FF funkcja „tylko powiększanie tekstu” musi być jednak wyłączona. SVG jest obsługiwany w większości przeglądarek. W chwili pisania tego tekstu testowałem na IE10, FF19 i Chrome28.
źródło
Ten artykuł był dla mnie niezwykle pomocny. Ogromne podziękowania dla Yonran. Chciałem przekazać dodatkowe informacje, które znalazłem, wdrażając niektóre z dostarczonych przez niego technik. 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 FF. Zobacz dokumenty w MDN tutaj . Do moich celów musiałem jedynie wykryć, czy przeglądarka została powiększona, czy nie, nie potrzebowałem rzeczywistego współczynnika powiększenia. Udało mi się uzyskać odpowiedź za pomocą jednego wiersza kodu JavaScript:
Łącząc to z rozwiązaniami IE8 + i Webkit, które były również pojedynczymi liniami, byłem w stanie wykryć powiększenie w zdecydowanej większości przeglądarek uderzających w naszą aplikację za pomocą zaledwie kilku linii kodu.
źródło
devicePixelRatio
: bierze pod uwagę skalowanie wyświetlania.To wszystko czego potrzebujesz.
źródło
10
odouterWidth
?Mam na to rozwiązanie od stycznia 2016 r. Testowane 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 2 punktami w obu układach współrzędnych. Chociaż istnieją różne stałe przesunięcia między układami współrzędnych wynikające z umeblowania przeglądarki, odległość między punktami powinna być identyczna, jeśli strona nie zostanie powiększona. Powodem określenia „daleko od siebie” (ustawiłem 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:
Dodaj detektor ruchu myszy
Przechwyć 4 pomiary ze zdarzeń myszy:
Zmierz odległość d_c między 2 punktami w systemie klienta
Zmierz odległość d_s między 2 punktami w systemie ekranowym
Jeśli d_c! = D_s, wówczas zastosowane zostanie powiększenie. Różnica między nimi mówi o powiększeniu.
Uwaga: Obliczenia odległości wykonuj tylko rzadko, np. Kiedy możesz próbkować nowe zdarzenie myszy, które jest dalekie od poprzedniego.
Ograniczenia: Zakłada, że użytkownik przynajmniej trochę poruszy myszką, a zoom jest do tej pory nieznany.
źródło
Możesz użyć Visual Viewport API :
Jest to standard i działa zarówno na komputerze, jak i telefonie komórkowym: obsługa przeglądarki .
źródło
W Internet Explorerze 7, 8 i 9 działa to:
Dodawane jest „+0,9”, aby zapobiec błędom zaokrąglania (w przeciwnym razie uzyskasz 104% i 109%, gdy powiększenie przeglądarki jest ustawione odpowiednio na 105% i 110%).
W IE6 powiększenie nie istnieje, więc sprawdzanie powiększenia nie jest konieczne.
źródło
Wymyśliłem:
1) Zrób
position:fixed
<div>
zwidth:100%
( id = zoomdiv )2) po załadowaniu strony:
I działało dla mnie
ctrl+
ictrl-
zoomów.lub mogę dodać linię do
$(window).onresize()
wydarzenia, aby uzyskać aktywny poziom powiększeniaKod:
PS: to mój pierwszy post, przepraszam za błędy
źródło
screen.availWidth
zgłasza szerokość ekranu w pikselach ekranu, a nie okno przeglądarki).Działa to świetnie dla mnie w przeglądarkach internetowych (Chrome, Safari):
Wydaje się jednak, że nie działa w przeglądarce Firefox.
Działa to również w WebKit:
źródło
document.width
powraca niezdefiniowanyZasadniczo mamy:
window.devicePixelRatio
który uwzględnia zarówno powiększenie na poziomie przeglądarki *, jak i powiększenie systemowe / gęstość pikseli.* - w komputerach Mac / Safari poziom powiększenia nie jest brany pod uwagę
vw
/vh
Jednostki CSSresize
zdarzenie, które jest wyzwalane przy zmianie poziomu powiększenia, powoduje efektywny rozmiar zmian oknato powinno wystarczyć dla normalnego UX. Jeśli musisz wykryć poziom powiększenia, może to oznaczać zły projekt interfejsu użytkownika.
Pitch-zoom jest trudniejszy do śledzenia i nie jest obecnie rozważany.
źródło
Na telefonie komórkowym urządzeniach (z Chrome na Androida lub Opera Mobile) możesz wykryć powiększenie window.visualViewport.scale . https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API
Wykryj w Safari: document.documentElement.clientWidth / window.innerWidth (zwróć 1, jeśli nie ma powiększenia na urządzeniu).
źródło
Twoje obliczenia są nadal oparte na liczbie pikseli CSS. Teraz mają tylko 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 zwykle wyświetla cztery piksele urządzenia na każdy piksel obrazu? Przy powiększeniu 50% urządzenie wyświetla teraz jeden piksel obrazu w jednym pikselu urządzenia.
źródło
W Chrome
źródło
Nie przetestowałem tego dla IE, ale jeśli utworzysz element za
elem
pomocąnastępnie
poda poziom powiększenia przeglądarki (w tym
document.body.style.zoom
współczynnik).źródło
To jest dla Chrome , po odpowiedzi użytkownika 800583 ...
Spędziłem kilka godzin na tym problemie i nie znalazłem lepszego podejścia, ale:
window.outerWidth/window.innerWidth
, a gdy nie jest, wydaje się, że stosunek jest(window.outerWidth-16)/window.innerWidth
, jednak do pierwszego przypadku można podejść przez drugi.Więc doszedłem do następujących ...
Ale to podejście ma ograniczenia: na przykład, jeśli grasz na akordeonie z oknem aplikacji (szybko powiększaj i zmniejszaj szerokość okna), dostaniesz przerwy między poziomami powiększenia, chociaż powiększenie się nie zmieniło (może to być szerokość zewnętrzna i szerokość wewnętrzna nie są dokładnie zaktualizowane w tym samym czasie).
A jeśli chcesz czynnik:
źródło
Mam to rozwiązanie tylko na urządzenia mobilne (testowane na Androidzie):
Jeśli chcesz uzyskać poziom powiększenia zaraz po przesunięciu szczypta, prawdopodobnie będziesz musiał ustawić mały limit czasu ze względu na opóźnienie renderowania (ale nie jestem pewien, ponieważ go nie przetestowałem).
źródło
Ta odpowiedź jest oparta na komentarzach na temat niepoprawnego powrotu devicePixelRatio do odpowiedzi user1080381.
Zauważyłem, że to polecenie wracało niepoprawnie również w niektórych przypadkach podczas pracy z komputerem stacjonarnym, Surface Pro 3 i Surface Pro 4.
Odkryłem, że działa na moim pulpicie, ale SP3 i SP4 podają różne liczby od siebie i na pulpicie.
Zauważyłem jednak, że SP3 wraca jako 1 i pół razy większy niż oczekiwany poziom powiększenia. Kiedy spojrzałem na ustawienia ekranu, SP3 był ustawiony na 150% zamiast 100%, które miałem na pulpicie.
Tak więc rozwiązaniem komentarzy powinno być podzielenie zwróconego poziomu powiększenia przez skalę aktualnie używanej maszyny.
Byłem w stanie uzyskać skalę w ustawieniach systemu Windows, wykonując następujące czynności:
Tak więc w przypadku mojego SP3, tak wygląda ten kod przy 100% powiększeniu:
Pomnożenie przez 100 w pierwotnej odpowiedzi użytkownika1080381 dałoby wtedy powiększenie 100 (%).
źródło
Czy obecnie działa, ale nadal trzeba go rozdzielić według przeglądarki. Testy zakończyły się pomyślnie w Chrome (75) i Safari (11.1) (jak dotąd nie znalazłem sposobu na FF). Uzyskuje również prawidłową wartość powiększenia na wyświetlaczu siatkówki, a obliczenia są uruchamiane po zdarzeniu zmiany rozmiaru.
źródło
tutaj to się nie zmienia !:
utwórz prosty plik HTML, kliknij przycisk. bez względu na poziom powiększenia: pokaże ci szerokość 400px (przynajmniej z Firefoxem i ie8)
źródło
To może, ale nie musi nikomu pomóc, ale miałem stronę, której nie mogłem poprawnie wyśrodkować, bez względu na to, jakie sztuczki CSS próbowałem, więc napisałem stronę wywoławczą pliku JQuery:
Wystąpił problem z poziomem powiększenia przeglądarki, strona przesuwałaby się na podstawie 100%, 125%, 150% itd.
Poniższy kod znajduje się w pliku JQuery o nazwie centerpage.js.
Z mojej strony musiałem link do JQuery i tego pliku, aby działał, mimo że moja strona wzorcowa miała już link do JQuery.
centerpage.js
:Również jeśli chcesz wyśrodkować panel:
źródło
To pytanie zostało postawione jak przed wiekami, ale dzisiaj, gdy szukałem tej samej odpowiedzi „Jak wykryć powiększenie i pomniejszenie”, nie mogłem znaleźć jednej odpowiedzi, która pasowałaby do wszystkich przeglądarek.
Jak na razie: w Firefox / Chrome / IE8 i IE9 powiększanie i pomniejszanie wywołuje zdarzenie window.resize. Można to zrobić za pomocą:
źródło
Obejście dla FireFox 16+, aby znaleźć DPPX (poziom powiększenia) wyłącznie w JavaScript:
źródło
źródło
Problem leży w rodzaju zastosowanego monitora, monitorze 4k w porównaniu ze standardowym monitorem. Chrome jest zdecydowanie najmądrzejszy, jeśli chodzi o to, aby powiedzieć nam, jaki jest poziom powiększenia, po prostu za pomocą
window.devicePixelRatio
, najwyraźniej może powiedzieć, jaka jest gęstość pikseli i zgłasza tę samą liczbę, bez względu na wszystko.Inne przeglądarki, nie tak bardzo. IE i Edge są prawdopodobnie najgorsze, ponieważ radzą sobie z różnymi poziomami powiększenia. Aby uzyskać tekst o tym samym rozmiarze na monitorze 4k, musisz wybrać 200% zamiast 100% na standardowym monitorze.
Od maja 2018 r. 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 zgłasza 100%, nawet dla monitorów 4k, które w rzeczywistości mają 200%, ale rozmiar tekstu jest naprawdę taki sam.
Oto skrzypce: https://jsfiddle.net/ae1hdogr/
Jeśli ktoś zechce zrobić dźgnięcie nożem w innych przeglądarkach i zaktualizować skrzypce, zrób to. Moim głównym celem było objęcie tych 3 przeglądarek wykrywaniem, czy ludzie używają współczynnika powiększenia większego niż 100%, aby korzystać z mojej aplikacji internetowej i wyświetlać powiadomienie sugerujące współczynnik powiększenia leasingodawcy.
źródło