Dlaczego znacznik rzutni na Galaxy Nexus/Android 4 nie działa?

Question

Pracuję nad funkcją webową, która powinna zmieniać rozmiar na dowolny rozmiar ekranu jaki może posiadać urządzenie. W systemach iOS i starszych wersjach systemu Android znacznik widoku działa dobrze. Obraz na ekranie jest zawsze zmieniany, aby pasował do ekranu.
(Podobnie jak tutaj: https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19)
Na Galaxy Nexusie (Android 4.0) nie będzie działać. Po lewej i prawej stronie jest około 20 pikseli i nie wiem, dlaczego to robi. Mój tag rzutni wygląda następująco:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

Bez względu na to, co mogę zmienić o tagu, przestrzeń jest zawsze tam, a zawartość nie pasuje do ekranu. Zrobiłem przykładową stronę, aby pokazać efekt: http://easyeve.w3y.de/link/index.html
Po otwarciu tego linku na iPhonie zawartość doskonale pasuje (nie zobaczysz nic żółtego = ciało), a szerokość dokumentu to 320 pikseli. Na Galaxy Nexus zobaczysz żółtą przestrzeń, a szerokość dokumentu to 360 pikseli (co stanowi dokładnie połowę rozdzielczości ekranu). To powinno być także 320px! Masz również ten problem i czy istnieje sposób, aby to naprawić?

Aktualizacja: Zauważyłem ten sam problem w Galaxy Note/Android 2.3.6 Dlatego nie jest to problem z Androidem 4. Ma to związek z dużym rozmiarem ekranu Chyba ..

Answer 1

Ten sam problem tutaj (Galaxy Nexus - Android 4.0.2), mówię o regularne stronę w domyślnej przeglądarce

Setting viewport meta Skala początkowa mniejsza niż 1 (pomniejszenie) wydaje się być ignorowana przez przeglądarkę. Wyższe wartości niż 1 (powiększenie) działa dobrze.

Istnieje ustawienia w przeglądarce (Ustawienia-> Zaawansowane), gdzie można zmienić rzeczy:

1. Domyślny zoom - to czyni różnicę, ale to nie rozwiąże problemu
2. Auto-fit stron - w moim przypadku nie ma znaczenia

Wszystko wydaje się działać tak doskonały w przeglądarce Chrome (beta w tej chwili), ale to nie jest domyślną przeglądarką dla ICS/Galaxy Nexus.

UPDATE (rozwiązanie):

Ustawianie rzutni meta "width = device-width" nie na Galaxy Nexus.
Ustawienie "width = 1280" działa po prostu świetnie (1280px to szerokość ekranu nexusa galaktyki).

Pamiętaj, że ustawienie „width = 1280, użytkownik skalowalnej = nie” łamie go ponownie (można pomniejszyć nawet jeśli użytkownik nie ma skalowalnej = no) :(

Answer 2

skończyło się spory z tym problemem dzisiaj Mój problem był nieco bardziej złożony, ponieważ oprócz podstawowego CSS musiałem sobie poradzić z arkuszem stylów Wordpress (z innego motywu). Chrome działał idealnie na moim telefonie i tablecie, a przeglądarka plików graficznych działała dobrze na tablecie. Jednak przeglądarka zasobów ciągle pomniejszała i pokazywała mi widok pulpitu.Po obu stronach nie było marginesów, co było poprawnym zachowaniem, ale przeglądarka powinna usunąć elementy pływające z paska bocznego i zawartości divs oraz powiększyć główną treść (używam zapytań @media). Jakkolwiek dziwnie to brzmi, naprawiłem to, najpierw ustawiając Zoom na Far, odświeżając, a następnie resetując Zoom na Medium i odświeżając.

Należy zauważyć, że gdy przyjrzałem się kodowi HTML i CSS Twojej strony, zauważyłem, że ustawiłeś konkretną szerokość piksela dla strony div. Jestem raczej pewien, że zamiast tego musisz użyć wartości procentowych dla szerokości. Na przykład, moja wyśrodkowana zawartość div ma margin: 0 auto;, min-width:320px;, i width:100%;.

Answer 3

Wpadłem na coś podobnego w zakładce Galaxy 2. Kiedy konfigurujesz WebSettings dla aplikacji, spróbuj ustawić webViewSettings.setUseWideViewPort (true); Zmusi to Androida do uwzględnienia metatagu widoku. Zostało to zignorowane w przypadku Galaxy Tab 2 dla mojej aplikacji i wszystko w rzutni było niepoprawnie rysowane, dopóki tego nie zmieniłem.