Tester per la compatibilità mobile

Inserisci un URL e il tester lo carica in un viewport simulato per telefono (375×812 per impostazione predefinita, dimensioni iPhone), controlla i comuni fallimenti di leggibilità mobile che il Mobile-Friendly Test di Google segnalava prima di essere ritirato, e restituisce un elenco che puoi correggere: meta tag viewport mancante, testo più piccolo di 12px, target di tocco più vicini di 48×48 px, scorrimento orizzontale, Flash/plugin non supportati e contenuti più larghi del viewport.

Come viene eseguito il test

  1. 1

    Inserisci l'URL

    URL completo con protocollo. Solo pagine pubbliche.

  2. 2

    La pagina viene renderizzata in un viewport di dimensioni telefono

    375×812 per impostazione predefinita, configurabile.

  3. 3

    Controlli automatici in esecuzione

    Meta viewport, dimensione del testo, spaziatura dei target di tocco, overflow, plugin.

  4. 4

    Anteprima e rapporto

    Screenshot della vista renderizzata su telefono più un elenco di problemi specifici.

Cosa controlla il tester

Configurazione del viewport

  • C’è un <meta name="viewport" content="width=device-width, initial-scale=1">? Senza di esso, i browser mobili rendono come se il telefono fosse largo come un desktop e si riducono per adattarsi, producendo testo piccolo.

Dimensione del testo

  • Qualsiasi testo renderizzato sotto 12 px viene segnalato, difficile da leggere su telefono senza zoom.
  • Molte guide di stile raccomandano un minimo di 16 px per il corpo. Didascalie molto piccole sono accettabili; il testo del corpo a 11 px non lo è.

Dimensione del target di tocco

  • Pulsanti, link, controlli dei moduli dovrebbero essere almeno 48×48 px (linea guida di accessibilità mobile di Google / W3C).
  • Target più piccoli sono difficili da colpire con precisione con un pollice e vengono segnalati.

Spaziatura dei target di tocco

  • Target più vicini di 8 px ai target adiacenti producono tocchi errati. Segnalati singolarmente.

Scorrimento orizzontale

  • Contenuti più larghi del viewport costringono a uno scorrimento orizzontale, scarsa esperienza utente mobile. Di solito causato da un’immagine senza max-width: 100% o una tabella che non può riadattarsi.

Plugin non supportati

  • Flash, Silverlight e ActiveX non funzionano sui telefoni. I siti legacy a volte vi fanno ancora riferimento.

Caricamento dei font

  • Font web molto grandi che bloccano il rendering per secondi vengono segnalati.

Perché è ancora importante

Google ha interrotto il suo Mobile-Friendly Test autonomo a dicembre 2023, ma la compatibilità mobile rimane un segnale di ranking diretto tramite Core Web Vitals e metriche di esperienza della pagina. L’indicizzazione mobile-first significa che Google esplora il tuo sito come un telefono; ciò che non funziona su mobile si riflette anche nei ranking desktop.

Correzioni tipiche

  • Aggiungi meta viewport a <head>: <meta name="viewport" content="width=device-width, initial-scale=1">.
  • CSS reattivo tramite media queries: @media (max-width: 768px) { ... }.
  • Flexbox e Grid piuttosto che layout a larghezza fissa.
  • Imposta max-width: 100%; height: auto per le immagini in modo che le immagini si riducano con il viewport.
  • Rendi le tabelle scorrevoli su schermi piccoli: avvolgi in <div style="overflow-x: auto">.
  • Usa rem o em per la dimensione del testo in modo che la scalabilità delle preferenze dell’utente funzioni.

Cosa non cattura il tester

  • Prestazioni su hardware reale. Un telefono Android di fascia bassa su 3G sperimenta ritardi che questo tester non simula. Usa Lighthouse per le prestazioni.
  • Interazioni touch. I menu a discesa solo hover che non funzionano al tocco necessitano di test manuali su un dispositivo reale.
  • Accessibilità oltre le dimensioni mobili. Contrasto, supporto per lettori di schermo, navigazione da tastiera, usa strumenti di accessibilità dedicati.
  • Errori JavaScript su browser specifici per mobile. Safari su iOS a volte si comporta in modo diverso rispetto ad altre build di WebKit.

Domande frequenti

Controlli simili, implementazione diversa. Google ha ritirato il suo strumento pubblico alla fine del 2023. Questo tester esegue lo stesso insieme di controlli classici utilizzati da Google, contro la versione della pagina che un browser headless recupera.

Sì, Google ha indicizzato prima mobile dal 2020, il che significa che il tuo rendering mobile è la versione principale per il ranking. I problemi mobili danneggiano i ranking anche nelle ricerche desktop.

No. Il tester recupera solo URL accessibili pubblicamente. Per lo staging protetto, testa localmente con la modalità di emulazione del dispositivo di Chrome DevTools.

Il predefinito è 375×812 (iPhone 12/13/14). Configurabile a 390×844 (iPhone 14 Pro), 360×640 (Android comune) o 412×915 (Pixel 7).

Tipicamente 5–15 secondi a seconda del peso della pagina. Le pagine pesanti con molti script richiedono più tempo; il tester attende l’evento di caricamento più un breve periodo di inattività prima di catturare.

Strumenti correlati

Strumento disponibile in altre lingue