Tendo ad usare questo:
Anche se vedo che questo è molto consigliato:
Ciò significa che il browser (probabilmente) renderà la larghezza della pagina alla larghezza del proprio schermo. Quindi, se lo schermo è largo 320px, la finestra del browser sarà larga 320px, invece di essere rimpicciolita e mostrare 960px (o qualunque cosa quel dispositivo faccia per impostazione predefinita, al posto di un meta tag reattivo).
Nota: non utilizzare un meta tag reattivo se il tuo sito web non è progettato specificamente per essere reattivo e funziona bene a quelle dimensioni, poiché peggiorerà l'esperienza.
Ci sono più attributi supportati da questo tag:
| Proprietà | Descrizione |
|---|---|
| larghezza | La larghezza del viewport virtuale del dispositivo. |
| larghezza del dispositivo | La larghezza fisica dello schermo del dispositivo. |
| altezza | L'altezza della "visualizzazione virtuale" del dispositivo. |
| altezza del dispositivo | L'altezza fisica dello schermo del dispositivo. |
| scala iniziale | Lo zoom iniziale quando si visita la pagina. 1.0 non esegue lo zoom. |
| scala minima | L'importo minimo che il visitatore può ingrandire sulla pagina. 1.0 non esegue lo zoom. |
| scala massima | L'importo massimo che il visitatore può ingrandire sulla pagina. 1.0 non esegue lo zoom. |
| scalabile dall'utente | Consente al dispositivo di ingrandire e rimpicciolire. I valori sono sì o no. |
In genere si consiglia di non impedire il ridimensionamento, poiché è fastidioso e potenzialmente un problema di accessibilità.
Probabilmente lo vorrai anche nel tuo CSS:
@-ms-viewport( width: device-width; )Buono a sapersi: la modifica del valore di questo metatag con JavaScript funziona, la pagina reagirà al nuovo valore. Estrarre l'intero tag e sostituire o modificare la contentproprietà. Non è un'esigenza super comune, ma può emergere.