Sito fatto con l'AI che non si vede bene da cellulare: cosa fare

Se il tuo sito fatto con l'AI non si vede bene da cellulare (testo che esce dallo schermo, menu che non si apre, pulsanti minuscoli o pagina che "balla" di lato) sei in buona compagnia: è uno dei problemi più comuni delle app create con Lovable, Bolt, v0 e strumenti simili. Quasi sempre la causa è un piccolo gruppo di errori di impaginazione che puoi individuare da solo in pochi minuti. La soluzione è correggerli una pagina alla volta, con richieste precise all'AI, invece di chiedere genericamente di "sistemare il mobile".

Cosa vuol dire "responsive", in parole semplici

Un sito responsive è un sito che si adatta alla larghezza dello schermo. Pensa all'acqua: prende la forma del bicchiere in cui la versi. Allo stesso modo, la stessa pagina dovrebbe disporsi su tre colonne su un computer e su una colonna sola su un telefono.

Per farlo, il codice usa delle "soglie" di larghezza (in gergo breakpoint): sotto una certa misura, per esempio 768 pixel, gli elementi cambiano disposizione. Gli strumenti AI di solito usano librerie che rendono questo lavoro abbastanza semplice. Il problema è che non sempre le usano in modo coerente.

Perché un sito fatto con l'AI non si vede bene da cellulare

Le cause che incontriamo più spesso sono queste:

• L'AI e tu lavorate su uno schermo largo. L'anteprima dell'editor è quasi sempre in formato computer. Se nessuno guarda la versione mobile, nessuno chiede di sistemarla.
• Larghezze fisse. Un riquadro largo esattamente 1.200 pixel (nel codice qualcosa come width: 1200px o, con Tailwind, w-[1200px]) non può entrare in uno schermo da 390. Spunta lo scorrimento orizzontale.
• Tabelle e griglie con troppe colonne. Una tabella prezzi a quattro colonne su un telefono diventa illeggibile o esce dai bordi.
• Immagini e video senza limiti di larghezza. Se un'immagine non ha l'istruzione per restringersi, mantiene la sua misura originale e deborda.
• Menu pensato solo per il computer. Cinque voci in fila funzionano su un monitor, non su un telefono. Serve il classico menu "a panino" (hamburger) che si apre al tocco.
• Altezze "a tutto schermo". Le sezioni alte quanto lo schermo (in CSS 100vh) su mobile non tengono conto della barra del browser, che compare e scompare. Risultato: il pulsante in fondo resta nascosto.
• Funzioni che appaiono solo passando con il mouse. Su un telefono il mouse non c'è, quindi menu e pulsanti che compaiono "al passaggio" restano invisibili.
• Correzioni a strati. Ogni prompt aggiunge una pezza sopra l'altra. Dopo dieci richieste, regole diverse si contraddicono e ogni modifica ne rompe un'altra.

Più raramente manca il meta tag viewport, una riga nell'intestazione della pagina che dice al telefono "mostra il sito alla larghezza reale del dispositivo". Senza, il telefono mostra la versione da computer rimpicciolita e tutto diventa minuscolo.

Come capire se è il tuo caso

Prova con la vista mobile del browser

Non serve un telefono per un primo controllo. In Chrome (ma anche in Edge, Firefox e Safari esiste qualcosa di simile):

1. Apri il tuo sito pubblicato, fai clic con il tasto destro e scegli Ispeziona.
2. Premi Ctrl+Shift+M su Windows o Cmd+Shift+M su Mac per attivare la vista dispositivo.
3. In alto scegli un telefono dall'elenco o imposta una larghezza di 375 pixel.
4. Scorri ogni pagina dall'alto in basso e prova anche a trascinare la pagina di lato: se si sposta, qualcosa è più largo dello schermo.

Prova su un telefono vero

La vista del browser è una simulazione. Alcune cose si notano solo con un dispositivo reale: la tastiera che copre i campi di un modulo, i pulsanti troppo piccoli per il dito, la pagina che si ingrandisce da sola quando tocchi un campo su iPhone. Se puoi, prova con un iPhone e con un Android.

I segnali più comuni e cosa significano

Cosa puoi fare tu, passo per passo

1. Fai un inventario. Apri ogni pagina dal telefono e fai uno screenshot di ciò che non va. Scrivi un elenco: pagina, problema, larghezza dello schermo. Ti servirà per dare istruzioni precise.
2. Salva una versione che funziona. Prima di toccare qualcosa, assicurati di poter tornare indietro: quasi tutti gli strumenti AI hanno una cronologia delle versioni. Se l'AI entra in un giro di correzioni che peggiorano le cose, leggi come uscire dal loop quando l'AI continua a rompere il codice.
3. Un problema alla volta, con una richiesta precisa. Indica la pagina, la larghezza, cosa vedi e cosa vuoi ottenere. Chiedi anche di non toccare il resto. Per esempio:

Nella pagina /prezzi, su schermi larghi 375 pixel, la tabella dei piani
esce dallo schermo e compare uno scorrimento orizzontale. Sistema solo
questa pagina: sotto i 768 pixel mostra i piani uno sotto l'altro.
Non modificare la versione da computer né altri componenti.

1. Ricontrolla anche il computer. Dopo ogni modifica guarda la pagina sia in formato mobile sia a schermo intero. È facile sistemare uno e rompere l'altro.
2. Prova più larghezze. Non solo 375 pixel: anche 360 (molti Android), 390-430 (iPhone recenti) e 768 (tablet). Molti problemi compaiono solo in una fascia precisa.
3. Alleggerisci le immagini. Da cellulare, con una connessione non sempre ottima, foto da diversi megabyte rendono il sito lento oltre che scomodo. Ne parliamo nella guida su come velocizzare un'app fatta con l'AI.

Perché conta anche per Google

Google valuta i siti soprattutto nella loro versione mobile: in gergo si chiama mobile-first indexing. Se da telefono parti della pagina sono nascoste, tagliate o illeggibili, è come se per Google non ci fossero. Se il tuo sito non compare nelle ricerche, il mobile è solo uno dei fattori: trovi gli altri nella guida su perché Google non indicizza un sito creato con l'AI.

Quando conviene farti aiutare

Molti problemi di visualizzazione da mobile si risolvono da soli con pazienza e richieste precise. Ci sono però situazioni in cui insistere con i prompt costa più tempo (e crediti) di quanto valga:

• ogni correzione per il telefono rompe la versione da computer, e viceversa;
• la pagina è costruita con elementi posizionati "a mano" in punti fissi, che non si adattano;
• lo stesso problema si ripete in tutte le pagine perché nasce da un componente condiviso;
• l'app è già usata da clienti veri e non puoi permetterti di fare prove in diretta.

In questi casi di solito controlliamo il sito su dispositivi reali, individuiamo i componenti che causano il problema e li sistemiamo una volta sola, in modo coerente in tutte le pagine. Se vuoi capire da dove partire nel tuo caso, prenota una call gratuita di 20 minuti: guardiamo insieme il sito e ti diciamo cosa conviene fare.