Strona źle wygląda na telefonie - przyczyny i jak to naprawić

Strona źle wygląda na telefonie najczęściej z kilku powtarzalnych powodów: brakuje znacznika viewport, elementy mają sztywną szerokość, obrazy, tabele lub osadzone mapy są szersze niż ekran, a motyw albo page builder ma nieustawiony widok mobilny. Większość z nich znajdziesz w narzędziach przeglądarki i naprawisz bez przebudowy całej strony.

Jak wygląda strona, która źle działa na telefonie?

Tekst trzeba powiększać palcami, strona przesuwa się na boki, a przyciski są tak blisko siebie, że łatwo trafić w sąsiedni. Na komputerze wszystko wygląda dobrze, dlatego właściciel często dowiaduje się o problemie dopiero od klientów.

• cała strona jest pomniejszona i wygląda jak wersja komputerowa w miniaturze,
• da się ją przewijać w poziomie, a po prawej stronie widać pusty pas,
• zdjęcia są ucięte, rozciągnięte albo wychodzą poza ekran,
• tabela z cennikiem jest nieczytelna albo ucięta,
• menu nie otwiera się albo nie da się go zamknąć,
• pop-up lub baner cookies zasłania treść, a przycisk zamknięcia jest poza ekranem.

Jeśli strona wygląda poprawnie, ale długo się ładuje, to inny problem. Opisujemy go we wpisie strona internetowa wolno się ładuje.

Dlaczego strona na telefonie wygląda inaczej niż na komputerze?

Bo telefon ma wąski ekran, a przeglądarka musi wiedzieć, jak dopasować do niego stronę. Gdy brakuje tej informacji albo elementy mają sztywne wymiary, przeglądarka pokazuje pomniejszoną wersję komputerową albo treść wychodzi poza ekran.

Brak znacznika viewport

W sekcji head każdej strony powinien być znacznik <meta name="viewport" content="width=device-width, initial-scale=1">. Bez niego przeglądarka w telefonie wyświetla stronę tak, jakby ekran był szeroki, i zmniejsza całość. Nie dodawaj do niego user-scalable=no ani maximum-scale=1: według dokumentacji MDN blokada powiększania utrudnia czytanie osobom słabowidzącym.

Sztywne szerokości i kolumny

Kontener z szerokością ustawioną w pikselach, np. 1200 px, kilka kolumn obok siebie bez przełamania na jedną albo duże marginesy wpisane na stałe sprawiają, że treść nie mieści się na ekranie. Podobnie działają długie adresy e-mail i linki, które nie łamią się do nowej linii.

Obrazy, tabele, mapy i filmy

Obraz bez ograniczenia max-width: 100%, osadzona mapa lub film z ustaloną szerokością i tabela z wieloma kolumnami to najczęstsze źródła przewijania w poziomie. Tabele wymagają osobnego rozwiązania: kontenera z przewijaniem albo zamiany na listę lub karty.

Za mały tekst i za małe przyciski

Tekst główny mniejszy niż 16 px trudno czytać na telefonie bez powiększania. Przyciski i linki powinny mieć obszar dotyku około 48 px i odstępy około 8 px, tak jak zaleca web.dev. Inaczej palec trafia w sąsiedni element, a odwiedzający się irytuje.

Pop-upy i banery

Okno zapisu do newslettera albo baner cookies zajmujący cały ekran zasłania treść, a na małym telefonie przycisk zamknięcia bywa niewidoczny. Google w swoich wytycznych zaleca zamiast pełnoekranowych okien niewielkie banery, które zostawiają treść dostępną.

Ustawienia motywu i page buildera

Elementor, Divi i podobne narzędzia mają osobne ustawienia dla komputera, tabletu i telefonu. Jeśli ktoś ustawił rozmiary czcionek, marginesy i kolumny tylko w widoku komputera, telefon dostaje je bez zmian. Zdarza się też, że część treści jest wyłączona w widoku mobilnym. Google indeksuje strony głównie w wersji mobilnej i zaleca, by zawierała tę samą główną treść co wersja na komputer.

Jak sprawdzić, jak strona wygląda na telefonie?

Najpierw na prawdziwych telefonach, potem w trybie urządzeń w Chrome i w Lighthouse. Search Console nie ma już raportu obsługi na urządzeniach mobilnych: Google wycofał go razem z testem optymalizacji mobilnej 1 grudnia 2023 r., a jako narzędzie do oceny wersji mobilnej wskazał m.in. Lighthouse.

• Prawdziwe telefony: sprawdź stronę co najmniej na jednym Androidzie i jednym iPhonie, najlepiej także na małym ekranie. Otwieraj opublikowaną stronę w oknie incognito, a nie podgląd w edytorze.
• Tryb urządzeń w Chrome: naciśnij F12, potem Ctrl+Shift+M, ustaw szerokość 360 px i przewiń całą stronę. Dokumentacja Chrome podkreśla, że to tylko przybliżenie telefonu, więc wynik potwierdź na prawdziwym urządzeniu.
• Lighthouse: w narzędziach przeglądarki uruchom audyt dla urządzenia mobilnego i przejrzyj uwagi z kategorii ułatwień dostępu.
• Search Console: narzędzie sprawdzania adresu URL po teście na żywo pokazuje zrzut ekranu strony widzianej przez robota Google dla smartfonów.

Element, który rozpycha stronę na boki, najszybciej znajdziesz w konsoli przeglądarki w trybie urządzeń. Ten kod wypisze wszystkie elementy wychodzące poza prawą krawędź ekranu:

document.querySelectorAll('body *').forEach(e => {
  if (e.getBoundingClientRect().right > document.documentElement.clientWidth) console.log(e);
});

Co sprawdzić na telefonie? Krótka lista kontrolna

Przejdź tę listę na każdej ważnej podstronie, najlepiej na dwóch różnych telefonach.

• strona nie przesuwa się w poziomie, także przy tabelach i mapach,
• tekst główny czytasz bez powiększania, a nagłówki nie łamią się w połowie słowa,
• w przyciski i linki trafiasz za pierwszym razem,
• menu otwiera się i zamyka, a jego pozycje są czytelne,
• baner cookies i pop-upy da się zamknąć i nie zasłaniają przycisku kontaktu,
• formularz pokazuje odpowiednią klawiaturę i da się go wysłać bez powiększania,
• na telefonie widać tę samą główną treść co na komputerze.

Kiedy naprawa nie ma sensu?

Gdy motyw nie był projektowany z myślą o telefonach i każda podstrona wymaga osobnych obejść. Wtedy rozsądniej bywa zaprojektować układ od nowa, zaczynając od małego ekranu, a nie dopasowywać go na końcu. Jeśli rozważasz taki krok, zobacz, jak wyglądają nasze strony internetowe dla firm i co obejmuje projekt.

Ten problem jest jednym z naszej listy 100 problemów ze stroną internetową firmy, w której osobna grupa dotyczy wersji mobilnej: menu, formularzy, sliderów i różnic między Androidem a iPhonem.