Czym jest Viewport, jak działa i do czego służy?
- Problem z przeglądarką mobilną
- Możliwe opcje dla metatagu rzutni
- Tabela zgodności rzutni.
- Dwa rzutnie
- Powiększanie
- Zrozumienie strony rzutni
- Android i target-densitydpi
Utwórz prostą stronę z minimalnym znacznikiem:
<! doctype html> <html> <head> <title> Witaj świecie! </ title> </ head> <body> <p> Witaj świecie! </ p> </ body> </ html>
Teraz otwórz tę stronę na urządzeniu mobilnym. Po otwarciu zobaczymy, że nasza strona będzie wyświetlana w następujący sposób:
Jak widać, tekst jest zbyt mały, aby go odczytać, jest dużo pustej przestrzeni, a aby przeczytać ten tekst, musimy go zwiększyć przez przybliżenie.
Problem z przeglądarką mobilną
Porównując przeglądarki mobilne i stacjonarne, najbardziej oczywistą różnicą jest rozmiar ekranu . Przeglądarki mobilne domyślnie wyświetlają witryny utworzone dla zwykłych przeglądarek komputerowych znacznie gorzej niż mogłyby: albo zmniejszając skalę, czyniąc tekst i inne treści zbyt małymi i nieczytelnymi (jak w naszej wersji), albo wyświetlając tylko niewielką część witryny, która pasuje do ekranu.
Jeśli myślisz logicznie, to ma sens: przeglądarka mobilna widzi stronę i zakłada, że jest przeznaczona dla wersji przeglądarki na komputer, co jest prawdą w przypadku większości witryn. Na tej podstawie przeglądarka ustawia szerokość strony na 980 pikseli (Safari iPhone) i próbuje dopasować ją optymalnie na ekranie smartfona, wyświetlając ją na maksymalną skalę. Zazwyczaj szerokość witryn jest w przybliżeniu taka sama, dlatego otwieranie przeciętnej strony internetowej na urządzeniu mobilnym rozciąga się na całą szerokość, ale 2-3 razy mniej niż pierwotny rozmiar.
Dlatego, jeśli chcemy zoptymalizować witrynę pod kątem smartfonów, ta opcja nie jest aktywna. Musimy w jakiś sposób poinformować przeglądarkę, że nasza strona jest zaprojektowana do wyświetlania na urządzeniach mobilnych i ustawić zasady prawidłowego zachowania obszaru wyświetlania.
W tym celu użyjemy rzutni meta tagów, która została wprowadzona przez Apple i jak zwykle skopiowana przez innych.
Dodaj następujący wiersz do bloku <head> </ head>:
<meta name = "viewport" content = "width = szerokość urządzenia">
I tak właśnie się dzieje:
To zupełnie inna sprawa. Ustawiając metatag viewport na „szerokość urządzenia” , informujemy przeglądarkę, że szerokość rzutni jest równa szerokości tego urządzenia, a nie standardowej szerokości 980 pikseli, jak może domyślnie przyjąć. Na dużej liczbie smartfonów szerokość ekranu wynosi 320 pikseli (w trybie pionowym). Możesz ustawić własną szerokość na 320px, co da taki sam wynik, ale na niektórych smartfonach szerokość ekranu może być inna, więc najlepszą opcją jest użycie szerokości urządzenia.
Jedną z najczęstszych opcji określania obszaru wyświetlania jest:
<meta name = "viewport" content = "width = szerokość urządzenia, początkowa skala = 1.0">
który określa szerokość strony i ustawia początkową skalę.
Często możesz znaleźć tę opcję:
<meta name = "viewport" content = "width = szerokość urządzenia, początkowa skala = 1,0, maksymalna skala = 1,0, skalowalna przez użytkownika = nie">
W tym przypadku strona jest ustawiona na szerokość urządzenia, na którym jest otwarta, a wszelkie skalowanie jest zabronione - zarówno początkowe podczas ładowania, jak i definiowane przez użytkownika po załadowaniu. W tym trybie strona mobilna działa jako aplikacja mobilna, w której użytkownik może korzystać tylko z przewijania pionowego lub poziomego. Jednak lepiej nie używać takiego nagrania na ślepo, ponieważ niemożliwe jest uniemożliwienie użytkownikowi pomniejszenia i skalowania według własnego uznania, jeśli pomysł na projekt nie wymaga tego. Na przykład zbyt mała czcionka obniża czytelność tekstu iw tym przypadku konieczne jest użycie przybliżenia.
Metatag viewport jest stosunkowo nowy, dlatego obecnie nie jest obsługiwany przez wszystkie przeglądarki, zwłaszcza dla starszych smartfonów. W takich przypadkach sensowne jest wykorzystanie starych metod, które pozwalają przeglądarce zidentyfikować stronę jako zoptymalizowaną dla sieci mobilnej. Można to zrobić za pomocą następujących metatagów:
<meta name = "MobileOptimized" content = "320" /> <meta name = "HandheldFriendly" content = "true" />
Możesz przeczytać więcej o tych i innych konkretnych tagach mobilnych. tutaj .
Możliwe opcje dla metatagu rzutni
Atrybut Możliwa wartość Opis szerokość Liczba całkowita nieujemna
(200px - 10,000px)
lub stała szerokości urządzenia. Określa szerokość rzutni.
Jeśli szerokość nie jest określona, mobilne Safari jest ustawione na 980px, w Operze - 850px, w Android WebKit - 800px, a w IE - 974px. wysokość Liczba całkowita nieujemna
(od 223 do 10 000 pikseli)
lub stała elementu urządzenia Określa wysokość rzutni. W większości przypadków ten atrybut można zignorować początkową skalą Liczba z kropką (od 0,1 do 10).
Wartość 1.0 - nie skaluj Definiuje początkową skalę strony. Im większa liczba, tym większa skala. skalowalne przez użytkownika nie lub tak Określa, czy użytkownik może skalować w oknie.
Wartość domyślna to „tak” w mobilnym Safari. Minimalna skala Liczba z kropką (od 0,1 do 10).
1.0 - nie skaluj Definiuje minimalną skalę rzutni. Wartość domyślna to „0,25” w mobilnym Safari. maksymalna skala Liczba z kropką (od 0,1 do 10).
1.0 - nie skaluj Definiuje maksymalną skalę rzutni. Wartość domyślna to „1,6” w mobilnym Safari.
Tabela zgodności rzutni.
Przeglądarka / platforma Korzystanie z przeglądarki Android Tak, ale przed wersją 2.2 początkowe skalowanie wynosi 1.0. Symbian / S60, Nokia Series 40, Motorola Internet Browser, NetFront, Openwave (Myriad), Opera Mobile, Opera Mini Brak BlackBerry Nie do wersji 4.2.1.
Tak od wersji 4.2.1 Internet Explorer Nie do IE6
Właściwie, jeśli nie masz planów zagłębienia się w niuanse i specyfikę tagu viewport, może to być koniec. Jeśli jednak ktoś chce zrozumieć zasadę rzutni i sposób, w jaki wizualna rzutnia i rzutnia strony różnią się, możesz przeczytać więcej.
I pomóż nam w tym uzupełnionym przeze mnie tłumaczenie wspaniały artykuł Petera-Paula Kocha ( Peter-Paul Koch ) Opowieść o dwóch rzutniach - część druga 🙂
Dwa rzutnie
Powiedzmy, że rzutnia jest zbyt wąska dla naszego szablonu CSS. Oczywistym rozwiązaniem jest poszerzenie widoku. Jednak na początku podzielimy rzutnię na dwie części: rzutnię wizualną i rzutnię strony.
Bardzo dobrą koncepcję rzutni wyjaśnia George Cummins. na przepełnienie stosu :
Wyobraź sobie rzutnię strony jako duży obraz o tym samym rozmiarze i kształcie. Teraz wyobraź sobie mniejszą ramkę, przez którą patrzysz na ten duży obraz. Rama ta jest otoczona nieprzenikalnym materiałem, który uniemożliwia całkowite obejrzenie dużego obrazu, z wyjątkiem jego poszczególnych części. Część dużego obrazu widoczna przez ramkę będzie wizualną rzutnią. Jeśli odejdziesz od ramki z dużym obrazem (pomniejsz, tj. Pomniejsz), możesz zobaczyć cały obraz naraz lub przesunąć bliżej (powiększenie, pomniejszenie), a następnie możesz wyświetlić tylko część obrazu. Możesz także obrócić ramkę, aby zmienić jej orientację (pionowa lub pozioma), podczas gdy rozmiar i kształt dużego obrazu (rzutni strony) zawsze pozostają takie same.
Wizualna rzutnia jest częścią strony, która jest aktualnie widoczna na ekranie. Użytkownik może przewinąć, aby zmienić widoczną część strony, lub użyć skalowania, aby zmienić rozmiar rzutni wizualnej.
Znacznik strony, zwłaszcza jeśli jego szerokość jest określona jako procent, jest obliczany względem rzutni strony , która jest znacznie szersza niż rzutnia wizualna.
Zatem element początkowo przyjmuje szerokość rzutni strony, a dalszy CSS zachowuje się tak, jakby ekran był znacznie szerszy niż ekran telefonu. Zapewnia to witrynie takie samo zachowanie, jak w przeglądarce na komputerze.
Jaka jest szerokość samego rzutni wizualnej? To zależy od przeglądarki. Safari iPhone używa 980px, Opera - 850px, Android WebKit - 800px i IE - 974px.
Niektóre przeglądarki zachowują się inaczej:
Symbian WebKit próbuje zrównać rzutnię strony z rzutnią wizualną, a to oznacza, że elementy o procentowej szerokości mogą zachowywać się nieprzewidywalnie. Jeśli jednak strona nie mieści się w rzutni wizualnej z powodu wartości bezwzględnych, przeglądarka rozciąga rzutnię strony na maksymalnie 850 pikseli.
Samsung WebKit sprawia, że widok strony jest równy szerokości najszerszego elementu.
W przypadku urządzenia BlackBerry, w skali 100%, rzutnia strony będzie w każdym przypadku równa rzutni wizualnej.
Powiększanie
Obie rzutnie są mierzone w pikselach CSS. Jednak podczas skalowania rozmiar rzutni wizualnej zmienia się (w miarę powiększania, mniejsza liczba pikseli CSS zmieści się na ekranie), podczas gdy rozmiar rzutni strony pozostanie niezmieniony. (Gdyby tak nie było, przeglądarka stale się zatwierdzałaby reflow strony z powodu przeliczenia szerokości procentowej.)
Zrozumienie strony rzutni
Aby lepiej zrozumieć rozmiar rzutni strony, spójrz na to, co dzieje się w najmniejszej możliwej skali strony. Większość przeglądarek mobilnych domyślnie wyświetla dowolną stronę w najmniejszej skali.
Faktem jest, że rozmiar rzutni strony przeglądarki całkowicie pokrywa się z ekranem w maksymalnej skali i dlatego jest równy rzutni wizualnej.
Zatem szerokość i wysokość rzutni strony są równe wszystkim wyświetlanym na ekranie w najmniejszej skali. W miarę powiększania się użytkownika wymiary te pozostają takie same.
Szerokość rzutni strony jest zawsze taka sama. Jeśli zmienisz orientację ekranu smartfona, zmieni się wizualna rzutnia, ale jednocześnie przeglądarka mobilna dostosuje się do nowej orientacji, nieznacznie powiększając, tak aby rzutnia strony ponownie stała się tej samej szerokości, co rzutnia wizualna.
Miało to wpływ na wysokość rzutni strony, która jest teraz znacznie mniejsza niż w orientacji pionowej. Ale dla programistów ważniejsza jest szerokość, a nie wysokość.
Android i target-densitydpi
Urządzenia na platformie Android mają własny atrybut dla rzutni, który wyłącza skalowanie wyświetlaczy o różnych rozdzielczościach.
<meta name = "viewport" content = "target-densitydpi = high-dpi" />
Na urządzeniach z HDPI (240dpi) nie będzie skalowania.
<meta name = "viewport" content = "target-densitydpi = medium-dpi: />
Na urządzeniach z MDPI (160dpi) nie będzie skalowania. Ta wartość dpi jest ustawiona domyślnie.
<meta name = "viewport" content = "target-densitydpi = low-dpi: />
Na urządzeniach z LDPI (120dpi) nie będzie skalowania
<meta name = "viewport" content = "target-densitydpi = urządzenie-dpi" />
Taki zapis oznacza, że nie będzie skalowania na żadnym z urządzeń na Androidzie.
Oficjalny przewodnik po developer.android.com
Dlaczego tak się dzieje?Jaka jest szerokość samego rzutni wizualnej?