Skonfiguruj widoczny obszar

Ta reguła uruchamia się, gdy PageSpeed Insights wykryje, że strona nie określa widocznego obszaru lub obszar nie dostosowuje się do różnych urządzeń.

Omówienie

Widoczny obszar zarządza sposobem wyświetlenia strony na urządzeniu przenośnym. Jeśli widoczny obszar nie jest skonfigurowany, urządzenia przenośne renderują stronę, dostosowując jej szerokość, ustawioną według typowych wymiarów ekranu komputera, do rozmiaru ekranu. Ustawiając widoczny obszar, możesz sterować szerokością i skalowaniem strony na różnych urządzeniach.

Po lewej: Strona bez metatagu określającego widoczny obszar.
Po prawej: Strona z widocznym obszarem dopasowanym do szerokości urządzenia.

Zalecenia

W obrębie tagu head kodu stron zoptymalizowanych pod kątem wyświetlania na urządzeniach przenośnych powinien się znaleźć metatag viewport z atrybutami width=device-width, initial-scale=1.

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

Dodatkowe informacje

Terminy

  • Piksel sprzętowy: Fizyczny piksel na wyświetlaczu. Na przykład iPhone 5 ma ekran o szerokości 640 pikseli sprzętowych (w poziomie).
  • Piksel niezależny od urządzenia (dip): Piksel urządzenia poddany skalowaniu w celu dopasowania do jednolitego piksela odniesienia przy normalnej odległości oglądania. Powinien to być mniej więcej ten sam rozmiar na każdym urządzeniu. Szerokość iPhone'a 5 wynosi 320 pikseli tego typu.
  • Piksel CSS: Jednostka używana do określania układu strony w odniesieniu do widocznego obszaru. Wymiary określone w stylach, np. width: 100px, są podawane właśnie w pikselach CSS. Stosunek pikseli CSS do pikseli niezależnych od urządzenia to współczynnik skalowania strony, czyli powiększenie.

Strony w wersji komputerowej na urządzeniach przenośnych

Jeżeli nie skonfigurujesz na stronie widocznego obszaru, przeglądarki na komórkach wyrenderują ją z zachowaniem szerokości zastępczej, która waha się w granicach od 800 do 1024 pikseli CSS. Współczynnik skalowania strony jest dostosowywany, by strona zmieściła się na wyświetlaczu, co z kolei zmusza użytkowników do powiększania strony w celu skorzystania z niej.

Metatag określający widoczny obszar

Metatag określający widoczny obszar informuje przeglądarkę o sposobie sterowania wymiarami strony i jej skalowania. Metatag ten powinien się znaleźć w obrębie tagu head dokumentu.

Widoczny obszar o stałej szerokości

Możesz ustawić widoczny obszar o stałej szerokości, np. width=320 lub width=1024. Nie jest to zalecane rozwiązanie, chociaż gwarantuje, że strony o ustalonym wymiarze będą się wyświetlały zgodnie z oczekiwaniami.

Responsywny widoczny obszar

Użycie wartości metatagu widocznego obszaru width=device-width instruuje stronę, że jej szerokość ma odpowiadać szerokości ekranu w pikselach niezależnych od urządzenia. Dzięki temu zawartość strony będzie przeformatowywana w zależności od wymiarów ekranu urządzenia.

Niektóre przeglądarki, w tym w systemach iOS i Windows Phone, utrzymują szerokość strony przy obróceniu ekranu w tryb poziomy, a ponadto starają się wypełnić ekran poprzez powiększenie zawartości strony, a nie jej przeformatowanie. Dodanie atrybutu initial-scale=1 pozwoli nakazać przeglądarce ustawienie pikseli CSS w stosunku 1:1 do pikseli niezależnych od urządzenia niezależnie od orientacji urządzenia, dzięki czemu możliwe będzie wykorzystanie potencjału pełnej szerokości w poziomie.

a
Po lewej: Obrócenie iPhone'a 5 przy ustawieniu width=device-width. Efektem jest szerokość 320 px w trybie poziomym.
Po prawej: Obrócenie iPhone'a 5 z ustawieniem width=device-width, initial-scale=1. Efektem jest szerokość 568 px w trybie poziomym.

Musisz przeprojektować strony, by mogły zmieniać szerokość w zależności od urządzenia dzięki zastosowaniu responsywnego widocznego obszaru. Skorzystaj z naszych zaleceń na temat dopasowywania rozmiaru zawartości do widocznego obszaru.

Inne uwagi

Unikaj minimum-scale, maximum-scale, user-scalable

Możesz ustawić minimalne i maksymalne powiększenie oraz całkowicie wyłączyć możliwość powiększania/pomniejszania widocznego obszaru. Wpłynie to jednak negatywnie na dostępność strony i z tego względu należy unikać takich działań.

@viewport

Metatag widocznego obszaru jest powszechnie obsługiwany, ale nie jest formalnie uwzględniony w standardzie. Jest on obecnie włączany do CSS w ramach specyfikacji adaptacji CSS do urządzeń. Zanim ta specyfikacja zostanie ostatecznie opracowana i wdrożona, należy sprawdzać zgodność metatagu widocznego obszaru, zarówno stosowanego samodzielnie, jak i w połączeniu z odpowiednimi stylami @viewport.

Zasoby: