Strona \u017ale wygl\u0105da na telefonie najcz\u0119\u015bciej z kilku powtarzalnych powod\u00f3w: brakuje znacznika viewport, elementy maj\u0105 sztywn\u0105 szeroko\u015b\u0107, obrazy, tabele lub osadzone mapy s\u0105 szersze ni\u017c ekran, a motyw albo page builder ma nieustawiony widok mobilny. Wi\u0119kszo\u015b\u0107 z nich znajdziesz w narz\u0119dziach przegl\u0105darki i naprawisz bez przebudowy ca\u0142ej strony.<\/p>\n
Tekst trzeba powi\u0119ksza\u0107 palcami, strona przesuwa si\u0119 na boki, a przyciski s\u0105 tak blisko siebie, \u017ce \u0142atwo trafi\u0107 w s\u0105siedni. Na komputerze wszystko wygl\u0105da dobrze, dlatego w\u0142a\u015bciciel cz\u0119sto dowiaduje si\u0119 o problemie dopiero od klient\u00f3w.<\/p>\n
Je\u015bli strona wygl\u0105da poprawnie, ale d\u0142ugo si\u0119 \u0142aduje, to inny problem. Opisujemy go we wpisie strona internetowa wolno si\u0119 \u0142aduje<\/a>.<\/p>\n Bo telefon ma w\u0105ski ekran, a przegl\u0105darka musi wiedzie\u0107, jak dopasowa\u0107 do niego stron\u0119. Gdy brakuje tej informacji albo elementy maj\u0105 sztywne wymiary, przegl\u0105darka pokazuje pomniejszon\u0105 wersj\u0119 komputerow\u0105 albo tre\u015b\u0107 wychodzi poza ekran.<\/p>\n W sekcji Kontener z szeroko\u015bci\u0105 ustawion\u0105 w pikselach, np. 1200 px, kilka kolumn obok siebie bez prze\u0142amania na jedn\u0105 albo du\u017ce marginesy wpisane na sta\u0142e sprawiaj\u0105, \u017ce tre\u015b\u0107 nie mie\u015bci si\u0119 na ekranie. Podobnie dzia\u0142aj\u0105 d\u0142ugie adresy e-mail i linki, kt\u00f3re nie \u0142ami\u0105 si\u0119 do nowej linii.<\/p>\n Obraz bez ograniczenia Tekst g\u0142\u00f3wny mniejszy ni\u017c 16 px trudno czyta\u0107 na telefonie bez powi\u0119kszania. Przyciski i linki powinny mie\u0107 obszar dotyku oko\u0142o 48 px i odst\u0119py oko\u0142o 8 px, tak jak zaleca web.dev. Inaczej palec trafia w s\u0105siedni element, a odwiedzaj\u0105cy si\u0119 irytuje.<\/p>\n Okno zapisu do newslettera albo baner cookies zajmuj\u0105cy ca\u0142y ekran zas\u0142ania tre\u015b\u0107, a na ma\u0142ym telefonie przycisk zamkni\u0119cia bywa niewidoczny. Google w swoich wytycznych zaleca zamiast pe\u0142noekranowych okien niewielkie banery, kt\u00f3re zostawiaj\u0105 tre\u015b\u0107 dost\u0119pn\u0105.<\/p>\n Elementor, Divi i podobne narz\u0119dzia maj\u0105 osobne ustawienia dla komputera, tabletu i telefonu. Je\u015bli kto\u015b ustawi\u0142 rozmiary czcionek, marginesy i kolumny tylko w widoku komputera, telefon dostaje je bez zmian. Zdarza si\u0119 te\u017c, \u017ce cz\u0119\u015b\u0107 tre\u015bci jest wy\u0142\u0105czona w widoku mobilnym. Google indeksuje strony g\u0142\u00f3wnie w wersji mobilnej i zaleca, by zawiera\u0142a t\u0119 sam\u0105 g\u0142\u00f3wn\u0105 tre\u015b\u0107 co wersja na komputer.<\/p>\n Najpierw na prawdziwych telefonach, potem w trybie urz\u0105dze\u0144 w Chrome i w Lighthouse. Search Console nie ma ju\u017c raportu obs\u0142ugi na urz\u0105dzeniach mobilnych: Google wycofa\u0142 go razem z testem optymalizacji mobilnej 1 grudnia 2023 r., a jako narz\u0119dzie do oceny wersji mobilnej wskaza\u0142 m.in. Lighthouse.<\/p>\n Element, kt\u00f3ry rozpycha stron\u0119 na boki, najszybciej znajdziesz w konsoli przegl\u0105darki w trybie urz\u0105dze\u0144. Ten kod wypisze wszystkie elementy wychodz\u0105ce poza praw\u0105 kraw\u0119d\u017a ekranu:<\/p>\n Poprawki wprowadzaj w motywie potomnym albo w ustawieniach motywu i buildera, a nie przez wklejanie styl\u00f3w do pojedynczych podstron. Inaczej problem wr\u00f3ci przy nast\u0119pnej nowej podstronie albo po aktualizacji motywu.<\/p>\n<\/div>\n Przejd\u017a t\u0119 list\u0119 na ka\u017cdej wa\u017cnej podstronie, najlepiej na dw\u00f3ch r\u00f3\u017cnych telefonach.<\/p>\n Gdy motyw nie by\u0142 projektowany z my\u015bl\u0105 o telefonach i ka\u017cda podstrona wymaga osobnych obej\u015b\u0107. Wtedy rozs\u0105dniej bywa zaprojektowa\u0107 uk\u0142ad od nowa, zaczynaj\u0105c od ma\u0142ego ekranu, a nie dopasowywa\u0107 go na ko\u0144cu. Je\u015bli rozwa\u017casz taki krok, zobacz, jak wygl\u0105daj\u0105 nasze strony internetowe dla firm<\/a> i co obejmuje projekt.<\/p>\nDlaczego strona na telefonie wygl\u0105da inaczej ni\u017c na komputerze?<\/h2>\n
Brak znacznika viewport<\/h3>\n
head<\/code> ka\u017cdej strony powinien by\u0107 znacznik <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><\/code>. Bez niego przegl\u0105darka w telefonie wy\u015bwietla stron\u0119 tak, jakby ekran by\u0142 szeroki, i zmniejsza ca\u0142o\u015b\u0107. Nie dodawaj do niego user-scalable=no<\/code> ani maximum-scale=1<\/code>: wed\u0142ug dokumentacji MDN blokada powi\u0119kszania utrudnia czytanie osobom s\u0142abowidz\u0105cym.<\/p>\nSztywne szeroko\u015bci i kolumny<\/h3>\n
Obrazy, tabele, mapy i filmy<\/h3>\n
max-width: 100%<\/code>, osadzona mapa lub film z ustalon\u0105 szeroko\u015bci\u0105 i tabela z wieloma kolumnami to najcz\u0119stsze \u017ar\u00f3d\u0142a przewijania w poziomie. Tabele wymagaj\u0105 osobnego rozwi\u0105zania: kontenera z przewijaniem albo zamiany na list\u0119 lub karty.<\/p>\nZa ma\u0142y tekst i za ma\u0142e przyciski<\/h3>\n
Pop-upy i banery<\/h3>\n
Ustawienia motywu i page buildera<\/h3>\n
\n\n
\n \nObjaw<\/th>\n Najcz\u0119stsza przyczyna<\/th>\n Poprawka<\/th>\n<\/tr>\n<\/thead>\n \n Ca\u0142a strona pomniejszona<\/td>\n Brak znacznika viewport<\/td>\n Dodaj meta viewport w motywie<\/td>\n<\/tr>\n \n Przewijanie na boki<\/td>\n Sztywna szeroko\u015b\u0107, tabela, mapa lub film<\/td>\n max-width: 100%<\/code>, tabela w przewijanym kontenerze<\/td>\n<\/tr>\n\n Za ma\u0142y tekst<\/td>\n Rozmiary ustawione tylko dla komputera<\/td>\n Co najmniej 16 px dla tekstu g\u0142\u00f3wnego<\/td>\n<\/tr>\n \n Trudno trafi\u0107 w przycisk<\/td>\n Ma\u0142e obszary dotyku<\/td>\n Oko\u0142o 48 px i odst\u0119py mi\u0119dzy elementami<\/td>\n<\/tr>\n \n Zas\u0142oni\u0119ta tre\u015b\u0107<\/td>\n Pop-up lub du\u017cy baner cookies<\/td>\n Ma\u0142y baner z widocznym zamkni\u0119ciem<\/td>\n<\/tr>\n \n Inny uk\u0142ad ni\u017c w edytorze<\/td>\n Nieustawiony widok mobilny w builderze<\/td>\n Ustawienia dla telefonu w ka\u017cdej sekcji<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Jak sprawdzi\u0107, jak strona wygl\u0105da na telefonie?<\/h2>\n
\n
document.querySelectorAll('body *').forEach(e => {\n if (e.getBoundingClientRect().right > document.documentElement.clientWidth) console.log(e);\n});<\/code><\/pre>\nCo sprawdzi\u0107 na telefonie? Kr\u00f3tka lista kontrolna<\/h2>\n
\n
Kiedy naprawa nie ma sensu?<\/h2>\n