Configura l'area visibile

Questa regola viene attivata quando PageSpeed Insights rileva che nella tua pagina non è specificata alcuna area visibile oppure è specificata un'area visibile che non si adatta a dispositivi differenti.

Panoramica

Un'area visibile consente di controllare la modalità di visualizzazione di una pagina web su un dispositivo mobile. Senza un'area visibile, nei dispositivi mobili la pagina verrà visualizzata con una larghezza tipica da computer desktop, ridimensionata in modo da adattarsi allo schermo del dispositivo. L'impostazione di un'area visibile ti consente di controllare il ridimensionamento e la larghezza della pagina su dispositivi differenti.

A sinistra: una pagina senza un'area visibile adattabile
A destra: una pagina con un'area visibile in grado di adattarsi alla larghezza del dispositivo.

Consigli

Le pagine ottimizzate per essere visualizzate correttamente sui dispositivi mobili devono includere un metatag viewport nell'intestazione del documento con la specifica width=device-width, initial-scale=1.

<meta name=viewport content="width=device-width, initial-scale=1">

Informazioni aggiuntive

Terminologia:

  • Pixel hardware: pixel fisico visualizzato sullo schermo. Ad esempio, un iPhone 5 ha uno schermo con 640 pixel hardware orizzontali.
  • Pixel indipendente dal dispositivo (dip, device-independent pixel): ridimensionamento che consente di fare corrispondere i pixel del dispositivo a un pixel di riferimento uniforme da una distanza di visualizzazione normale, che deve avere più o meno le stesse dimensioni su tutti i dispositivi. Un iPhone 5 ha una larghezza pari a 320 dip.
  • Pixel CSS: unità utilizzata per il layout di pagina controllata dall'area visibile. Le dimensioni dei pixel negli stili come width: 100px vengono specificate in pixel CSS. Il rapporto tra i pixel CSS e i pixel indipendenti dal dispositivo corrisponde al fattore di ridimensionamento della pagina o zoom.

Pagine desktop su dispositivi mobili

Quando per una pagina non è specificata alcuna area visibile, tale pagina verrà visualizzata dai browser per dispositivi mobili con una larghezza di riserva compresa tra 800 e 1024 pixel CSS. Il fattore di ridimensionamento della pagina viene regolato in modo che la pagina si adatti allo schermo, costringendo l'utente a eseguire lo zoom prima di poter interagire con essa.

Metatag viewport

Un metatag viewport comunica al browser in che modo controllare il ridimensionamento e le dimensioni della pagina e deve essere incluso nell'intestazione del documento.

Area visibile a larghezza fissa

L'area visibile può essere impostata su una larghezza specifica, ad esempio width=320 o width=1024. Sebbene sia sconsigliata, questa impostazione può essere un'utile soluzione provvisoria per assicurarti che le pagine con dimensioni fisse vengano visualizzate come previsto.

Area visibile reattiva

L'utilizzo del valore metatag viewport width=device-width comunica alla pagina di adattarsi alla larghezza dello schermo nei pixel indipendenti dal dispositivo. Ciò consente alla pagina di adattare dinamicamente i contenuti in modo che corrispondano a schermi di dimensioni differenti.

In alcuni browser, tra cui iOS e Windows Phone, la larghezza della pagina rimane costante quando l'utente passa alla modalità orizzontale. Tali browser, inoltre, eseguono lo zoom anziché adattare dinamicamente i contenuti per riempire lo schermo. L'aggiunta dell'attributo initial-scale=1 comunica ai browser di stabilire una relazione di tipo 1:1 tra i pixel CSS e i pixel indipendenti dal dispositivo indipendentemente dall'orientamento di quest'ultimo, consentendo alla pagina di utilizzare l'intera larghezza orizzontale.

vs
A sinistra: un iPhone 5 con rotazione width=device-width e conseguente larghezza orizzontale di 320 px.
A destra: un iPhone 5 con rotazione width=device-width, initial-scale=1 e conseguente larghezza orizzontale di 568 px.

Per utilizzare un'area visibile reattiva, le pagine devono essere progettate in modo da risultare compatibili con diverse larghezze. Per suggerimenti, consulta i nostri consigli relativi all'impostazione delle dimensioni per l'area visibile.

Ulteriori considerazioni

Evita di utilizzare minimum-scale, maximum-scale, user-scalable

È possibile impostare lo zoom minimo e massimo o impedire all'utente di eseguire interamente lo zoom dell'area visibile. Tali opzioni hanno un impatto negativo sull'accessibilità e, in linea di massima, dovrebbero essere evitate.

@viewport

Benché ampiamente supportato, il metatag viewport non fa parte di uno standard formale. Questo comportamento è in fase di inclusione in CSS come parte della specifica di adattamento ai dispositivi CSS Device Adaptation. Finché questa specifica non viene finalizzata e ampiamente implementata, gli autori devono continuare a utilizzare il metatag viewport ai fini della compatibilità, da solo o con gli stili @viewport corrispondenti.

Risorse: