Przeglądarka systemu Android zgłasza niewłaściwy rozmiar ekranu?

Question

Zajmuję się tworzeniem strony mobilnej i natknąłem się na interesujący problem.

Testuję na moim komputerze stacjonarnym, a także na moim Motorola Droid (Android 2.2). Mam ustawione zapytania mediów, aby załadować 3 różne arkusze stylów (szerokość 320 pikseli, szerokość 480 pikseli i szerokość 640 pikseli). Zauważyłem, że mój Droid ładuje arkusz stylów 320px pomimo posiadania ekranu 480x854px. Ustawiłem mały JS, aby dowiedzieć się, jaka jest szerokość ekranu, i raportuje 320px.

Czy przeglądarka systemu Android działa w MDPI na ekranach HDPI? Poprawnie skaluje 320 pikseli, aby wypełnić ekran, ale jestem nieco zdezorientowany, dlaczego tak się dzieje.

Mam również < meta name = "viewport" content = "width = device-width" > na mojej stronie, więc to nie jest problem.

Answer 1

Wielu producentów OEM zdecydowało się ustawić domyślne wymiary okna przeglądarki na podstawie rozdzielczości iPhone'a (lub podobnych rozdzielczości), mimo że mają zupełnie inną rozdzielczość. Apple miał podobny problem z wydaniem "wyświetlacza siatkówki" na iPhonie 4, gdzie arkusz specyfikacji zawiera 640 pikseli, ale screen.width zwróci 320 pikseli, gdy jest ustawiony.

Jak wspomniano wyżej @omermuhammed oprzyj swoją logikę na screen.width, zapytaniach CSS @media i/lub wykryciu urządzenia za pomocą WURFL lub DeviceAtlas.

Poniższy artykuł może być również interesujące, pomagając wyjaśnić kwestię:

Piksel nie jest piksel nie jest piksel po @ppk http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

Answer 2

Nie wiem w kontekście przeglądarki Android, ale widziałem telefony, w których Android zgłosił zły rozmiar ekranu. Polecam oparcie logiki na kombinacji ciągu znaków agenta użytkownika ORAZ rozdzielczości ekranu. W ten sposób możesz wykryć ten telefon i obsługiwać go w inny sposób, a także korzystać z normalnych mechanizmów z innymi.

Answer 3

zauważyłem kilka problemów z uzyskaniem screen.width i screen.height na Androida 4.2.

• Wymiary nie są aktualizowane w celu odzwierciedlenia orientacji urządzenia.

Możesz to poprawić, jeśli chcesz najpierw uzyskać orientację, a następnie odpowiednio zmienić wartości.

http://menacingcloud.com/?c=orientationScreenWidth

http://davidwalsh.name/orientation-change (przyjemne korzystanie z matchMedia) elementy interfejsu użytkownika

• systemowe są odejmowane od rzeczywistych wymiarów ekranu urządzenia.

Np. Ekran nexus 7 ma rozdzielczość 1280 x 800, 1205 x 800. 75 pikseli dla przycisków OS.

• Idealnie (moim zdaniem) wartości powinny być zgłaszane w pikselach CSS, a nie pikselach urządzenia.

Np. nexus 7, widok CSS jest ustawiony na portret 600px, ale screen.width zgłasza 800px. Zatem DPR wynosi ok. 1.33

Ogólnie, screen.width i screen.height nie są bardzo niezawodne (iOS ma również problemy z orientacją).

Mam nadzieję, że wkrótce zmienię tę odpowiedź jeszcze bardziej szczegółowo.