Softonic

Testator przydatny na urządzenia mobilne

Krok 1 / 2
Dalej

Wpisz adres URL i program testowy go załadowuje w symulowanym oknie widzenia telefonu (domyślnie 375 × 812 pikseli, odpowiadające rozmiarom ekranu iPhone’a), sprawdza typowe problemy z czytelnością na urządzeniach mobilnych, które wcześniej wykrywał własny test Google’a Mobile-Friendly Test, zanim został wycofany, i zwraca listę problemów, które można poprawić: brak metatagów okna widzenia, tekst o wielkości mniejszej niż 12px, elementy do dotykania znajdujące się bliżej niż 48 × 48px, przesuwanie poziome, pluginy typu Flash lub nie wspierane oraz zawartość o większej szerokości niż okno widzenia.

W jaki sposób przeprowadza się test

  1. 1

    Wpisz adres URL

    Pełna adresa URL z protokołem. Dostępny wyłącznie dla stron publicznych.

  2. 2

    Strona jest renderowana w oknie o wielkości telefonu.

    Domyślnie rozmiar 375 × 812; można go dostosować.

  3. 3

    Wykonywane są automatyczne kontrole.

    Meta widoku, wielkość tekstu, odstępy między punktami dotyku, przekroczenie ekranu, dodatki.

  4. 4

    Przewidzenie i raportowanie

    Ekranowa zdjęcie przedstawiające wyrenderowany widok telefonu oraz lista konkretnych problemów.

Co sprawdza tester

Konfiguracja okna widoku

Czy istnieje model <meta name="viewport" content="width=device-width, initial-scale=1">? Bez niego mobilne przeglądarki działają tak, jakby telefon miał szerokość ekranu komputera, i zmniejszają rozmiar obrazu, by pasować do ekranu, co powoduje pojawięcie się bardzo małego tekstu.

Rozmiar tekstu

– Wszystkie teksty o wielkości poniżej 12 px są oznaczane – trudne do odczytania na telefonie bez funkcji powiększania i zmniejszania. – Wiele przewodników stylowych zaleca minimalny rozmiar tekstu na poziomie 16 px. bardzo małe podpisy są akceptowane, natomiast tekst o wielkości 11 px nie jest dopuszczalny.

Wielkość celu do naciśnięcia

Klawisze, linki oraz elementy sterowania formularzem muszą mieć rozmiar co najmniej 48 × 48 px (zgodnie z wytycznymi Google/W3C dotyczącymi dostępności na urządzeniach mobilnych). – mniejsze cele trudno trafić precyzyjnie palcem wskazującym i są oznaczane.

Odległość między celami dotykania

– Celiki znajdujące się bliżej niż o 8 px od sąsiednich celików powodują błędne naciśnięcia; są oznaczane indywidualnie.

Przesuwanie poziome

– Zawartość przekraczająca obszar okna wymaga poziomego przesuwania – to złe doświadczenie użytkownika na urządzeniach mobilnych. Zazwyczaj występuje to w przypadku obrazów nie posiadających kodu max-width: 100% lub tabel, które nie mogą się automatycznie dostosować do rozmiaru ekranu.

Nieobsługiwane wtyczki

  • Flash, Silverlight i ActiveX nie działają na telefonach. Stare strony internetowe czasem nadal na nich opierają się.

Wczytywanie fontów

– bardzo duże fonty internetowe, które na kilka sekund blokują renderowanie, są oznaczane.

Dlaczego to wciąż ma znaczenie

Google zakończył działania związane z samodzielnym testem przyjazności dla urządzeń mobilnych w grudniu 2023 roku, jednak ta cecha nadal stanowi bezpośredni wskaźnik rankingu na podstawie metryk Core Web Vitals oraz parametrów doświadczenia użytkownika na stronie. Metoda indeksowania z uwzględnieniem urządzeń mobilnych oznacza, że Google przeszukuje Twoją stronę z perspektywy telefonu; problemy występujące na urządzeniach mobilnych pojawiają się również w wynikach wyszukiwania na komputerze stacjonarnym.

Typowe poprawki

– Dodaj metadane dotyczące obszaru widzenia (viewport) do plików <head> i <meta name="viewport" content="width=device-width, initial-scale=1">. – CSS odporny na rozmiary ekranu za pomocą zapytań typu media query: @media (max-width: 768px) { ... }. – Flexbox i siatka zamiast układów o stałej szerokości.

  • Ustaw obraz max-width: 100%; height: auto, aby obrazy zmniejszały się wraz z zmianą rozmiaru okna widoku. – Umożliwienie przesuwania tabel na małych ekranach poprzez użycie formatu <div style="overflow-x: auto">. – Użyj rem lub em do ustalenia rozmiaru tekstu, aby skaliowanie według preferencji użytkownika funkcjonowało poprawnie.

Co tester nie wykryje

– Wydajność na rzeczywistym sprzęcie. Telefon Androidowy z niską wydajnością działający w sieci 3G doświadcza opóźnień, które ten tester nie symuluje. Do oceny wydajności użyj aplikacji Lighthouse. – Interakcje dotykowe: rozwijane menu dostępne wyłącznie przy przesuwaniu kursora, które działają poprzez dotyk, wymagają ręcznego testowania na rzeczywistym urządzeniu. – Dostępność wykraczająca poza parametry rozmiaru ekranu na urządzeniach mobilnych: kontrast, wsparcie dla programów do odczytywania ekranu oraz nawigacja za pomocą klawiatury – należy wykorzystywać specjalistyczne narzędzia wspomagające dostępność. – Błędy w JavaScript na specyficznych dla urządzeń mobilnych przeglądarkach. Safari na systemie iOS czasem zachowuje się inaczej niż inne wersje biblioteki WebKit.

Najczęściej zadawane pytania

Sprawdzania są podobne, ale implementacja różna. Google wycofał swoje otwarte narzędzie na koniec 2023 roku. Ten tester wykonywa ten sam zestaw klasycznych sprawdzeń, które używał Google, w odniesieniu do wersji strony pobieranej przez przeglądarz bez nagłówka.

Tak – Google stosuje strategię „mobile-first“ od 2020 roku, co oznacza, że wersja aplikacji mobilnej jest główną podstawą dla klasyfikacji. Problemy związane z urządzeniami mobilnymi negatywnie wpływają na pozycje w wynikach wyszukiwania nawet na komputerach stacjonarnych.

Nie. Testator pobiera wyłącznie adresy URL dostępne publicznie. W przypadku środowisku testowego chronionego przeprowadź test lokalnie w trybie emulacji urządzenia w narzędziach Chrome DevTools.

Wartość standardowa to 375×812 (iPhone 12/13/14). Można ją dostosować do 390×844 (iPhone 14 Pro), 360×640 (typowy model Androida) lub 412×915 (Pixel 7).

Zwykle trwa to od 5 do 15 sekund, zależnie od wielkości strony. Strony o dużym obszarze zawierające wiele tekstów wymagają dłuższego czasu ładowania; tester czeka na zakończenie procesu ładowania oraz krótki okres bezczynności, zanim przeprowadzi rejestrację.

Powiązane narzędzia

Sprawdzanie długości meta opisu

Zmierz meta opis w znakach i szacowanych pikselach, porównaj wskazówki redakcyjne i przejrzyj makiety na komputer i telefon.

Tester nagłówków bezpieczeństwa HTTP

Wklej nagłówki odpowiedzi HTTP i lokalnie sprawdź HSTS, CSP, ochronę ramek, MIME, referrer oraz zasady cross-origin.

Ekstraktor linków zewnętrznych

Wklej surowy kod HTML, opcjonalnie podaj adres URL podstawowy i otrzymaj czystą, bez duplikatów listę wszystkich zewnętrznych linków http/https w kodzie, na potrzeby audytów linków i analiz SEO.

Sprawdzacz indeksowalności

Sprawdź, czy adres URL może zostać indeksowany: plik robots.txt, metaparametry robots, tag X-Robots, sygnały kanoniczne oraz stan HTTP.

Symulator wyników Google

Wyświetl przybliżony snippet w stylu Google z limitami znaków dla telefonu i komputera. Szkic pozostaje w tej sesji przeglądarki.

Walidator mapy witryny XML

Sprawdź w przeglądarce składnię XML mapy witryny, brakujące lokalizacje, powtarzające się adresy URL i typowe wartości pól.

Narzędzie jest dostępne w innych językach