<
  • Главная
Статьи

Czym jest Viewport, jak działa i do czego służy?

  1. Problem z przeglądarką mobilną
  2. Możliwe opcje dla metatagu rzutni
  3. Tabela zgodności rzutni.
  4. Dwa rzutnie
  5. Powiększanie
  6. Zrozumienie strony rzutni
  7. 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:

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.

Dlaczego tak się dzieje?

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.

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.

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.

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.

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ść.

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?


Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью