Rozdzielczość ekranu na stronie mobilnej

Question

Projektuję witrynę mobilną z sekcją do pobrania tapet. Aby pomieścić wielu użytkowników, chcę umożliwić pobieranie tapety na podstawie rozdzielczości ekranu. Chcę wykryć rozdzielczość z JavaScript i pokazać odpowiednią tapetę.

To co znalazłem w Internecie i próbowałem i nie udało xD:

width = window.innerWidth || document.body.clientWidth 
height = window.innerHeight || document.body.clientHeight; 

Dla mojego SGS3, który ma rozdzielczość 720x1280 otrzymuję 360x567.

Jak wykryć rozdzielczość telefonu z JavaScript?

Answer 1

Można chyba użyć obiektu screen:

var w = screen.width; 
var h = screen.height; 

Aktualizacja - Spróbuj użyć go z window.devicePixelRatio:

var ratio = window.devicePixelRatio || 1; 
var w = screen.width * ratio; 
var h = screen.height * ratio; 

Answer 2

Można użyć window.screen.width i window.screen.height wykryć rozdzielczość ekranu urządzenie.

Answer 3

ta będzie działać w urządzenia mobil zbyt

screen_width = document.documentElement.clientWidth; 
screen_heght = document.documentElement.clientHeight; 

Answer 4

Ken Fyrstenberg, wielkie rzeczy, dzięki. Szukałem łatwego sposobu na wykrycie wszystkich możliwych rozmiarów ekranu i rozdzielczości, i aby odpowiedzieć na pytanie, na jaki stosunek jest dobry, pozwala zobaczyć, czy jest to na przykład urządzenie wyświetlające wysokiej rozdzielczości typu siatkówki.

wh:768x1024 cwh:768x905 rwh:1536x2048 ts:touch 

połączeniu z testów dotykowych sprawdzić to związane SO:

mogę uzyskać bardzo dobre poczucie rzeczywistego ekranu/dotknąć specyfikacje urządzeń nasi prawdziwi użytkownicy są uruchomione.

do rzeczy internetowych, oczywiście, to, co naprawdę Cię interesuje, to rozmiar rzeczywistego okna wewnętrznego przeglądarki, przestrzeń, którą przydzielono na urządzeniu, które jest. Tak jak na marginesie, już widziałem, że urządzenia Apple wydają się zawsze dawać wymiary w trybie portretowym, np. 768 x 1024 dla iPad'a, który jest nieco irytujący, ponieważ miałem nadzieję dowiedzieć się, jak większość użytkowników współdziałać z siecią i naszą witryną.

Android wydaje się podać faktyczną szerokość/wysokość tego momentu, tzn. Albo wysokość, albo wysokość lub wysokość w pionie.

Na przykład:

var ratio = window.devicePixelRatio || 1; 
var is_touch_device = 'ontouchstart' in document.documentElement; 
var touch_status = (is_touch_device) ? 'touch' : 'no-touch'; 
touch_status = ' ts:' + touch_status; 
var width_height = 'wh:' + screen.width + 'x' + screen.height; 
var client_width_height = ' cwh:' + document.documentElement.clientWidth + 'x' + document.documentElement.clientHeight; 
var rw = screen.width * ratio; 
var rh = screen.height * ratio; 
var ratio_width_height = ' r:' + ratio + ' rwh:' + rw + 'x' + rh; 
var data_string = width_height + client_width_height + ratio_width_height + touch_status; 

Stwarza to wiele danych na temat systemu klienckiego, które można następnie przekazać do czegoś przy użyciu dowolnej metody lubisz.

UPDATE: To właśnie wziął kilka minut za pomocą tej metody, aby znaleźć jak Urządzenia Apple faktycznie zgłosić swoją szerokość/wysokość:

wh:375x667 cwh:667x375 r:2 rwh:750x1334 ts:touch Device type: mobile 

Jak widać, metoda document.documentElement.clientWidth zgłasza rzeczywistą szerokość czy portret/krajobraz, dobre rzeczy.