Dlaczego strona nie mieści się na ekranie
Układ responsywny dostosowuje się do dostępnej szerokości, zamiast zakładać jeden rozmiar ekranu. Poziome przewijanie pojawia się, gdy element strony wystaje poza obszar widoczny w przeglądarce. Czasem wystarczy kilka pikseli: użytkownik przesuwa stronę w bok, choć chce czytać ją z góry na dół. Szczególnie przeszkadza to przy tekście, formularzach i przyciskach, które mogą znaleźć się poza kadrem.
Przyczyną nie zawsze jest element widoczny w miejscu, w którym zauważysz problem. Szerokość całej strony może zwiększać grafika w stopce, tabela w środku artykułu albo wysunięte menu. Dlatego lepiej najpierw znaleźć element powodujący przepełnienie, a dopiero potem zmieniać CSS. Ustawienie overflow-x: hidden na całej stronie może schować pasek przewijania, lecz również uciąć treść i zamaskować usterkę.
Na początek sprawdź, czy dokument ma prawidłowo ustawiony viewport. Bez niego przeglądarka mobilna może przyjąć szeroki układ strony i pomniejszyć go na ekranie telefonu. Samo ustawienie viewportu nie naprawi jednak zbyt szerokich elementów: pozwala oceniać układ względem rzeczywistej szerokości urządzenia.
Najpierw znajdź element, który wystaje
Otwórz stronę w narzędziach deweloperskich przeglądarki i włącz podgląd urządzenia. Zmieniaj szerokość okna płynnie, zamiast sprawdzać tylko jeden model telefonu. Zwróć uwagę, kiedy pojawia się poziomy pasek i które fragmenty strony wystają poza prawą krawędź. Sprawdź nie tylko stronę główną, ale też typowe podstrony: artykuł z tabelą, kartę produktu, wyniki wyszukiwania i formularz.
Pomocna jest również prosta kontrola w konsoli: porównaj document.documentElement.scrollWidth z document.documentElement.clientWidth. Jeśli pierwsza wartość jest większa, dokument ma poziome przepełnienie. Ta informacja nie wskazuje jeszcze winnego elementu. W narzędziach deweloperskich zaznaczaj podejrzane bloki i sprawdzaj ich obramowanie oraz obliczoną szerokość. Zacznij od dużych obrazów, nawigacji, tabel, elementów z ustaloną szerokością i treści wklejonych z innych źródeł.
Testuj także stany, które łatwo pominąć: otwarte menu, długi tytuł produktu, komunikat błędu przy polu formularza i powiększony tekst. Strona może mieścić się na ekranie z przykładową treścią, ale przestać działać po dodaniu dłuższych danych.
Obrazy, kolumny i odstępy: najczęstsze poprawki
Obraz o dużej naturalnej szerokości nie powinien rozpychać wąskiej kolumny. Zwykle pomaga ograniczenie jego maksymalnej szerokości do szerokości kontenera i zachowanie automatycznej wysokości. Dotyczy to także grafik w treści artykułów oraz elementów osadzanych. Przy osadzonym materiale sprawdź dodatkowo szerokość jego własnego kontenera: samo zmniejszenie sąsiednich elementów nie wystarczy.
W układach z kolumnami zwróć uwagę na szerokości sztywne. Dwie kolumny po 300 pikseli, odstęp i boczne marginesy nie zmieszczą się na ekranie o szerokości 360 pikseli. Dla wąskich widoków często rozsądniej ułożyć je jedna pod drugą. Jeśli korzystasz z flexboxa, sprawdź, czy element zawierający długą treść może się zwężać; bywa, że potrzebuje min-width: 0. W siatce podobny problem może rozwiązać kolumna zdefiniowana jako minmax(0, 1fr), zamiast takiej, której minimalną szerokość wyznacza zawartość.
Uważaj też na dodawanie szerokości i odstępów. Element o szerokości 100% z bocznym paddingiem może przekroczyć kontener, jeśli model pudełkowy nie uwzględnia paddingu w tej szerokości. Warto sprawdzić box-sizing oraz to, czy szerokie marginesy nie pozostają niezmienione na małych ekranach. Poprawka powinna dotyczyć reguły powodującej problem, nie przypadkowego sąsiada.
Długa treść wymaga osobnego podejścia
Nie wszystko da się po prostu zwęzić. Długi adres, identyfikator zamówienia albo ciąg znaków bez spacji może wypchnąć kolumnę poza ekran. Dla tekstu, który można bezpiecznie dzielić, rozważ regułę pozwalającą na łamanie długich wyrazów. Sprawdź jednak efekt wizualny: nagłówki i przyciski powinny pozostać czytelne, a podział tekstu nie może ukrywać ważnej informacji.
Tabela z wieloma kolumnami może potrzebować przewijania poziomego, ale tylko wewnątrz własnego obszaru. Umieść ją w kontenerze, który mieści się w szerokości strony i pozwala przewijać zawartość w bok. W przypadku prostych danych lepszym rozwiązaniem może być zmiana sposobu prezentacji na małym ekranie. Podobnie potraktuj bloki kodu: lokalne przewijanie jest zwykle bardziej użyteczne niż rozszerzenie całego dokumentu.
Krótka lista kontroli przed publikacją
Sprawdź stronę przy kilku wąskich szerokościach i przy stopniowej zmianie rozmiaru okna. Przewiń ją od nagłówka do stopki, otwórz menu, wypełnij formularz i sprawdź treści o różnej długości. Upewnij się, że obrazy nie wychodzą poza kontenery, kolumny układają się czytelnie, a tabele i kod przewijają się tylko we własnych obszarach, jeśli jest to potrzebne.
Na koniec sprawdź stronę na rzeczywistym telefonie oraz po powiększeniu tekstu w przeglądarce. Usunięcie poziomego paska to nie jedyny cel: treść powinna nadal dawać się przeczytać, a przyciski i pola formularza powinny pozostać dostępne. Taka kontrola nie daje obietnicy lepszych pozycji w wyszukiwarce, ale pomaga uniknąć bariery, która utrudnia korzystanie ze strony.
