Nella maggior parte dei casi, uno o più oggetti della pagina sono più larghi dello schermo di un telefono, e questo rende troppo larga l'intera pagina. Imposta questi oggetti su Larghezza piena con una Larg. max, e si restringeranno per adattarsi. Lo schermo di un computer è abbastanza largo da nascondere il problema, ed è per questo che lì la pagina sembra a posto.
1. Controlla che tipo di pagina hai
Seleziona la pagina nell'elenco delle pagine, poi vai su Ispettore > Impostazioni pagina > Layout di pagina.
| Se indica | Cosa significa | Vai a |
|---|---|---|
| Responsive | Un'unica pagina che si adatta a ogni schermo | Passaggi da 2 a 5 |
| Layout centrato o Layout allineato a sinistra | Una pagina a larghezza fissa che sul telefono resta alla larghezza del computer, a meno che tu non aggiunga una pagina separata per i telefoni (una pagina mobile) | Passaggi 2 e 6 |
Non cambiare il Layout di pagina per risolvere il problema. Può stravolgere il tuo design e la modifica non si può annullare.
2. Guardala sul telefono
Una finestra del browser sul computer non corrisponde sempre a un vero telefono, quindi usa uno di questi metodi:
- Il tuo sito web pubblicato: aprilo in una finestra privata sul telefono. Una finestra privata non usa la copia salvata dal browser. Se lì la pagina appare corretta, il tuo sito web è a posto: vedi Ho pubblicato ma il mio sito web mostra ancora la versione vecchia.
- Prima di pubblicare: fai clic su Anteprima nella barra degli strumenti, scegli Preview QR Code (Codice QR di anteprima) e inquadra il codice con la fotocamera del telefono.
Se l'anteprima con codice QR non si carica:
- Collega il telefono e il computer alla stessa rete Wi-Fi e disattiva qualsiasi VPN o iCloud Private Relay.
- Se EverWeb indica che il server di anteprima locale non è attivato, vai su EverWeb > Impostazioni > Generale su Mac, oppure su Modifica > Opzioni > Generale su Windows, e seleziona Usa server anteprima.
Annota quali oggetti sporgono, poi correggili uno alla volta.
3. Pagine Responsive: correggi ogni oggetto troppo largo
Sei nel posto giusto se la pagina scorre di lato, ha una striscia bianca su un lato, è tagliata o è spinta verso sinistra.
- Seleziona l'oggetto. Se compare su ogni pagina, probabilmente si trova su una pagina Mastro, quindi modificalo lì.
- Vai su Ispettore > Metriche (la terza icona).
- In Dimensione, seleziona Larghezza piena.
- In Larg. max, inserisci la larghezza massima che vuoi per l'oggetto su uno schermo grande, ad esempio la sua larghezza attuale. Il campo resta disattivato (in grigio) finché non selezioni Larghezza piena. Lascia 0 per riempire l'intera pagina.
- Se Larg. min contiene un numero, assicurati che sia inferiore alla larghezza di un telefono. I telefoni sono larghi circa 375 pixel. 0 significa nessun minimo.
- In Margini e padding, riporta a 0 o a un valore piccolo eventuali margini sinistri o destri grandi. I margini si sommano alla larghezza.
- Ripeti per ogni oggetto che sporge.
Due eccezioni:
- L'oggetto non può essere a Larghezza piena. Alcuni widget hanno sempre una larghezza fissa, come i widget Facebook Page Timeline e PayPal (Legacy). Tienili in un Contenitore largo circa da 280 a 320 pixel.
- L'oggetto non va a Larghezza piena, o resta troppo largo, all'interno di una riga reattiva. Fai clic con il tasto destro (o Control-clic su Mac), scegli Rimuovi dalla riga reattiva, poi segui i passaggi qui sopra.
4. Immagini: evita che appaiano schiacciate o lascino spazi vuoti
Prima completa il passaggio 3 per l'immagine, poi:
- Seleziona l'immagine e vai su Ispettore > Opzioni forma (la seconda icona).
- In Riempimento, nel menu a discesa del ridimensionamento dell'immagine, scegli Scala per adattare.
- Seleziona Adatta l'altezza all'immagine. Rimuove lo spazio vuoto sopra e sotto l'immagine sul telefono. Funziona con le immagini impostate su Larghezza piena e Scala per adattare.
| Impostazione | Cosa vede il visitatore |
|---|---|
| Scala per adattare | L'intera immagine. Può lasciare spazio vuoto, a meno che tu non selezioni Adatta l'altezza all'immagine |
| Scala per riempire | L'immagine riempie la sua area e i bordi potrebbero essere tagliati |
| Estendi | L'immagine riempie la sua area e sul telefono può apparire schiacciata |
Se un'immagine compare sul computer ma manca sul telefono, prova a passare da Scala per riempire a Scala per adattare.
5. Una sezione si sovrappone a un'altra
Un Contenitore con altezza fissa non può crescere quando sul telefono il suo contenuto ha bisogno di più spazio, quindi la sezione successiva finisce sopra di esso.
- Seleziona il Contenitore. Se continui a selezionare ciò che contiene, fai clic con il tasto destro e usa Scegli Livello.
- Vai su Ispettore > Impostazioni widget (l'ingranaggio, l'ultima icona).
- In Dimensionamento, imposta Altezza su Auto.
- Imposta Altezza massima su 0, che significa nessun limite.
- Fai lo stesso per eventuali Contenitori al suo interno.
Controlla anche che per l'oggetto non sia attivo Consenti il trascinamento libero (Ispettore > Metriche, in Posizione). Un oggetto posizionato liberamente non spinge nulla verso il basso, quindi sul telefono può finire sopra altri contenuti. Deseleziona la casella se l'oggetto deve seguire il flusso della pagina.
6. Pagine Layout centrato
L'intera pagina è troppo piccola o tagliata sul telefono. Questo tipo di pagina mantiene la larghezza del computer. Aggiungi una pagina separata per i telefoni: vedi Il mio sito web non si vede bene su un telefono.
Sul telefono il testo si sovrappone o esce dalle sue caselle. Sul telefono il testo può occupare più righe di quelle previste nel design, e quindi non entra più nella sua casella. Usa Dimensione Minima del Carattere in modo che il testo possa rimpicciolirsi su uno schermo piccolo:
- Seleziona il testo.
- Apri l'Ispettore del testo e vai alla sezione Font.
- Lascia la tua dimensione normale nel campo Font Size (Dimensione carattere). Nel campo Dimensione Minima del Carattere, inserisci la dimensione più piccola che vuoi sul telefono. Ad esempio, con una dimensione del carattere di 24, potresti inserire 18.
- Vai su File > Pubblica l'intero sito.
Se tutto il tuo testo si trova in una o due caselle di testo grandi, metti anche ogni paragrafo in una casella di testo a parte. Le caselle lunghe crescono sul telefono e spostano fuori allineamento gli altri elementi.
7. Verifica che abbia funzionato
- Pubblica il tuo sito web. Se hai modificato più pagine, usa File > Pubblica l'intero sito. Vedi Qual è la differenza tra Pubblica e Pubblica l'intero sito?
- Apri la pagina in una finestra privata sul telefono.
Quando il problema è risolto, la pagina non scorre di lato, niente è tagliato e niente si trova sopra qualcos'altro. Controlla anche le altre pagine, perché spesso usano le stesse impostazioni.
Se vedi ancora la pagina vecchia, vedi Come svuotare la cache del browser.
8. Ancora non va? Inviaci il tuo file di progetto
Possiamo vedere il tuo sito web pubblicato, ma non il tuo file di progetto (la copia modificabile del tuo sito web, salvata sul tuo computer). Con il file di progetto possiamo trovare esattamente l'oggetto che causa il problema.
- Vai su File > Finestra progetti per aprire l'elenco dei tuoi siti web, intitolato Benvenuto in EverWeb.
- Accanto al tuo progetto, fai clic sui tre puntini su Mac, oppure sulla freccia verso il basso su Windows.
- Scegli Invia File di progetto al Supporto.
- Al termine del caricamento, EverWeb ti fornisce un link. Inviaci quel link.
Se il tuo progetto supera i 2GB, o il caricamento non si completa, usa invece la nostra pagina di caricamento dei progetti. Su Windows, comprimi in un file zip l'intera cartella che contiene il progetto, non solo il file .ewwinproj.
Indicaci anche:
- Il nome della pagina e dell'oggetto che non appare corretto
- La tua versione di EverWeb
- Se usi Mac o Windows
E inviaci due screenshot: uno della pagina sul telefono e uno dell'intera finestra di EverWeb con quell'oggetto selezionato.
Articoli correlati
- Il mio sito web non si vede bene su un telefono: come funziona la versione mobile in EverWeb
- Perché questo oggetto non va dove lo trascino?
- Ho pubblicato ma il mio sito web mostra ancora la versione vecchia
- Qual è la differenza tra Pubblica e Pubblica l'intero sito?
- Come svuotare la cache del browser