Czy istnieje sposób na uzyskanie szerokości urządzenia użytkownika, w przeciwieństwie do szerokości widocznego obszaru, za pomocą javascript?
Jak mogę powiedzieć, zapytania o media CSS oferują to
@media screen and (max-width:640px) {
/* ... */
}
i
@media screen and (max-device-width:960px) {
/* ... */
}
Jest to przydatne, jeśli kieruję reklamy na smartfony w orientacji poziomej. Na przykład w systemie iOS deklaracja max-width:640px
będzie dotyczyła zarówno trybu poziomego, jak i pionowego, nawet na iPhonie 4. O ile wiem, nie dotyczy to Androida, więc użycie szerokości urządzenia w tym przypadku z powodzeniem jest ukierunkowane na obie orientacje, bez kierowania na komputery stacjonarne.
Jeśli jednak wywołuję powiązanie javascript na podstawie szerokości urządzenia, wydaje mi się, że ograniczam się do testowania szerokości widocznego obszaru, co oznacza dodatkowy test, jak poniżej,
if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ }
Nie wydaje mi się to eleganckie, biorąc pod uwagę wskazówkę, że szerokość urządzenia jest dostępna dla css.
źródło
Modernizr
może pomóc Ci to zrobić w „czysty i ogólny sposób”: stackoverflow.com/questions/25935686/… . Odnośnie pierwszego komentarza: możesz przejść do Google „Modernizr vs <otherLib> zapytanie o media”, aby dowiedzieć się, co działa najlepiej w Twoim przypadkuOdpowiedzi:
Szerokość ekranu urządzenia można uzyskać za pomocą właściwości screen.width.
Czasami przydatne jest również użycie window.innerWidth (zwykle nie spotykane na urządzeniach mobilnych) zamiast szerokości ekranu w przypadku przeglądarek stacjonarnych, w których rozmiar okna jest często mniejszy niż rozmiar ekranu urządzenia.
Zwykle w przypadku urządzeń mobilnych ORAZ przeglądarek komputerowych używam:
źródło
width=device-width
, powinieneś otrzymać rzeczywistą wartość.var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
zwraca 667 dla iPhone 6 ORAZ 6 Plus. To rozwiązanie nie działa poprawnie.Jednym z problemów z użyteczną odpowiedzią Bryana Riegera jest to, że na wyświetlaczach o dużej gęstości urządzenia Apple zgłaszają szerokość ekranu w spadkach, podczas gdy urządzenia z Androidem zgłaszają to w fizycznych pikselach. (Zobacz http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html .) Proponuję używać
if (window.matchMedia('(max-device-width: 960px)').matches) {}
w przeglądarkach obsługujących matchMedia.źródło
if (window.matchMedia('(max-device-width: 960px)').matches) { var winW = (window.innerWidth > 0) ? window.innerWidth : screen.width; } else { var winW = screen.width; }
var isMobile = window.matchMedia && window.matchMedia('(max-device-width: 960px)').matches || screen.width <= 960;
matchMedia()
istnieje polifill: github.com/paulirish/matchMedia.jsWłaśnie wpadłem na ten pomysł, więc może jest krótkowzroczny, ale wydaje się, że działa dobrze i może być najbardziej spójny między twoim CSS i JS.
W swoim CSS ustawiasz wartość max-width dla html na podstawie wartości @media screen:
Następnie, używając JS (prawdopodobnie za pośrednictwem frameworka takiego jak JQuery), po prostu sprawdzisz wartość max-width tagu html:
Teraz możesz użyć tej wartości, aby wprowadzić zmiany warunkowe:
Jeśli umieszczenie wartości max-width w tagu html wydaje się przerażające, być może możesz umieścić inny tag, taki, który jest używany tylko do tego celu. Dla mojego celu tag html działa dobrze i nie wpływa na moje znaczniki.
Przydatne, jeśli używasz Sass itp . : Aby zwrócić bardziej abstrakcyjną wartość, taką jak nazwa punktu przerwania, zamiast wartości px możesz zrobić coś takiego:
<div id="breakpoint-indicator" />
$('#breakpoint-indicator').css('content');
), która zwraca wartość „large”, „mobile” itp. W zależności od tego, na jaką właściwość content ustawiono zapytanie o media.Teraz możesz działać na tych samych nazwach punktów przerwania, co w sass, np. Sass:
@include respond-to(xs)
i jsif ($breakpoint = "xs) {}
.Szczególnie podoba mi się w tym to, że mogę zdefiniować wszystkie nazwy moich punktów przerwania w css iw jednym miejscu (prawdopodobnie dokument ze zmiennymi scss), a mój js może działać na nich niezależnie.
źródło
var width = Math.max(window.screen.width, window.innerWidth);
Powinno to obsłużyć większość scenariuszy.
źródło
Powinieneś użyć
Jest to traktowane jako kompatybilność z różnymi przeglądarkami i jest tą samą metodą co jQuery (okno) .width (); używa.
Po szczegółowe informacje zajrzyj na: https://ryanve.com/lab/dimensions/
źródło
Myślę, że używanie
window.devicePixelRatio
jest bardziej eleganckie niżwindow.matchMedia
rozwiązanie:źródło
Sprawdź to
https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
źródło
możesz łatwo użyć
document.documentElement.clientWidth
źródło
Telefony Lumia podają nieprawidłową szerokość ekranu (przynajmniej na emulatorze). Więc może
Math.min(window.innerWidth || Infinity, screen.width)
będzie działać na wszystkich urządzeniach?Albo coś bardziej szalonego:
źródło
Możesz użyć document.documentElement.clientWidth, aby uzyskać szerokość urządzenia klienta i śledzić szerokość urządzenia, ustawiając setInterval
tak jak
źródło
Podobnie jak FYI, istnieje biblioteka o nazwie breakpoints, która wykrywa maksymalną szerokość ustawioną w CSS i pozwala na użycie jej w warunkach JS if-else przy użyciu znaków <=, <,>,> = i ==. Uważam, że to całkiem przydatne. Rozmiar ładunku nie przekracza 3 KB.
źródło