Dimensioni dello schermo e dispositivi

I punti di interruzione (chiamati anche dimensioni dello schermo) sono intervalli di pixel che corrispondono alla larghezza di diversi dispositivi, come desktop, tablet e dispositivi mobili. Quando la larghezza di un dispositivo rientra in un intervallo di pixel predefinito per i punti di interruzione, il layout del sito viene regolato in modo che il contenuto e il design siano ottimizzati per le dimensioni e l'orientamento del dispositivo. Ad esempio, se sto visualizzando un sito su un computer desktop, posso visualizzare il menu completo del sito, ma quando visualizzo il sito sul mio dispositivo mobile, vedo invece un menu hamburger.

Di seguito sono riportati i punti di interruzione offerti nell'editor:

Se si apportano modifiche al design, al layout o al contenuto al punto di interruzione predefinito del desktop, le modifiche vengono applicate automaticamente agli altri punti di interruzione. Se modifichi il contenuto, ad esempio l'aggiunta di un widget, la modifica del testo o l'aggiunta o l'eliminazione di una sezione, la modifica viene applicata automaticamente a tutti gli altri punti di interruzione, indipendentemente dal punto di interruzione in cui è stata apportata la modifica. Ad esempio, se si aggiunge un widget al punto di interruzione del tablet, il widget verrà aggiunto anche a tutti gli altri punti di interruzione.

Tuttavia, se si apportano modifiche alla posizione o alle dimensioni di un elemento in punti di interruzione specifici, le modifiche non verranno applicate ad altri punti di interruzione. Ad esempio, se si modificano le dimensioni di un elemento nel punto di interruzione per dispositivi mobili, la modifica verrà applicata solo ai punti di interruzione per dispositivi mobili e orizzontali per dispositivi mobili e a nessun altro punto di interruzione.

Passare da una visualizzazione del dispositivo all'altra

I siti web reattivi funzionano su desktop, tablet e dispositivi mobili. Il nostro editor reattivo consente di visualizzare in anteprima ciascuna delle varie visuali del sito durante la modifica, per verificare l'aspetto che avrà sui diversi dispositivi prima di pubblicarlo, in modo che i tuoi clienti abbiano un'esperienza positiva indipendentemente dal dispositivo che usano per visualizzare il sito.

Per cambiare visuale, fai clic su uno dei pulsanti dei dispositivi nella barra di navigazione in alto:

Le diverse visuali dei dispositivi non sono versioni separate del sito, per cui l'eliminazione di un elemento in una visuale (es. mobile), rimuove quell'elemento da tutto il sito (desktop, tablet e mobile). Invece di eliminarlo, fai clic con il pulsante destro del mouse sull'elemento che ti interessa e seleziona l'opzione per nasconderlo su un dispositivo specifico.

Le anteprime dei dispositivi non rispecchiano sempre esattamente ciò che si vede su un dispositivo reale. Caratteristiche come caratteri, dimensioni della finestra del dispositivo, interfaccia utente e comportamento del browser possono rendere più o meno imprecise queste anteprime. Per una versione più accurata, visualizza il sito da un dispositivo in uso.