Jedną z kluczowych koncepcji w każdym responsywnym projekcie jest zmiana rozmiaru widocznego obszaru. Dzieje się tak, ponieważ mobilne okna robocze różnią się znacznie w zależności od rzutni pulpitu. Aby kontrolować rozmiar widocznego obszaru, tradycyjnie używamy metatagu widoku.
Jednak metatag z widocznym obszarem, podobnie jak wszystkie najgorsze zmiany w przeglądarce na zawsze, nie jest ważny W3C. Został pierwotnie wprowadzony przez Apple w Safari i od tego czasu został zaadoptowany przez inne przeglądarki. Powoduje to niespójną implementację.
Na szczęście W3C ponownie wyrusza nam na ratunek, wprowadzając zasadę @viewport CSS.
Używając starego metatagu, powiemy przeglądarce, jaki rozmiar powinien wyglądać widok:
Niezależnie od tego, że jest ona nieważna, instrukcja widoku nie jest danymi, lecz jej prezentacją. Dlatego, zgodnie z naszymi zasadami separacji danych i prezentacji, instrukcja viewport musi być w CSS, a nie HTML.
Rozwiązanie W3C w CSS wygląda tak:
@viewport {width: device-width;}Lub na przemian możesz ustawić okienko ekranu z liczbą, na przykład tak:
@viewport {width: 640px;}Możesz użyć reguły @viewport w połączeniu z @media queries, aby zmusić dowolny obszar wyświetlania większy niż 960 do zmniejszenia do 960 pikseli, jak na przykład:
@media screen and (min-width: 960px){@viewport {width: 960px;}}Reguła @viewport pozwala także domyślnie powiększyć stronę, a nawet ustawić maksymalny zoom:
@viewport {width: 960px;zoom: 1;max-zoom: 3;}Można całkowicie zablokować powiększanie, ustawiając właściwość user-zoom na stałą. Jednak powiększanie, szczególnie na smartfonach, jest niezbędne dla ułatwienia dostępu i polecam korzystanie z tej właściwości.
Jeszcze jedna bardzo przydatna właściwość pozwala nam zablokować naszą stronę w trybie poziomym lub portretowym:
@viewport {orientation: landscape;}Oto zła wiadomość: obecnie ta zasada jest obsługiwana tylko przez Internet Explorera 10 i Operę i wymaga odpowiednio prefiksów -ms- i -o-browser.
Chociaż jest to co najmniej rozczarowujące, fakt, że funkcja wyświetlania jest już dostępna w większości przeglądarek, powinna oznaczać, że jest to prosta reguła. Mam nadzieję, że wkrótce zaczniemy widzieć, jak wprowadzono ją w nocnych kompilacjach.
Czy interesuje Cię zgodność z normami? Czy W3C pomaga lub przeszkadza postępowi w sieci? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, obraz okna za pośrednictwem LostBob Photos