Vista visiva vs Vista di layout sui dispositivi mobili

Question

Ho appena letto uno nice article on viewport che mi ha lasciato un paio di domande relative a Vista visuale vs Vista di layout sui dispositivi mobili.

la larghezza e l'altezza della finestra di layout sono uguali a qualunque possono essere visualizzati sullo schermo in modalità massimo zoom-out

non ho ben capito che cosa significa. Quando si dice "modalità zoomata massima", significa che la finestra di layout è diversa per HTML diversi (e non specifica per dispositivi diversi come iPad, Xoom, ecc.)?

In secondo luogo, ho creato un demo page per misurare queste due finestre. (Si prega di vedere questo su un iPhone/iPad per ottenere i valori corretti.)

Capisco che la finestra di layout può essere modificato impostando il tag viewport meta, ma che anche cambiamenti della vista visivo - il motivo è che ? Dice che il viewport visivo è la parte della pagina che è attualmente mostrata sullo schermo, quindi ho capito che il viewport visivo non dovrebbe essere influenzato dall'impostazione del meta viewport.

Answer 1

Sia la vista di layout che la vista visiva sono misurati in pixel CSS. Questa è una distinzione importante da fare. A differenza dei pixel fisici sul dispositivo, i pixel CSS vengono utilizzati per mantenere le dimensioni del contenuto relativamente costanti e controllate e il dispositivo quindi traduce i pixel CSS in pixel del dispositivo.

Capire la differenza tra pixel CSS e pixel del dispositivo può aiutare a comprendere e rispondere alle vostre domande.

1. Le dimensioni della vista di layout sono effettivamente le dimensioni iniziali del contenuto (in pixel CSS).

   La vista di layout viene utilizzata per determinare in modo ottimale come posizionare e rendere inizialmente il contenuto. È indipendente dal livello di zoom del dispositivo. Dicendo "... qualsiasi cosa possa essere mostrata sullo schermo nella modalità massima zoomata", penso che alluda al punto che le dimensioni della finestra di layout non cambiano; sarà sempre della stessa dimensione, indipendentemente dalla vista visuale corrente.

2. La finestra di visualizzazione è solo l'area visualizzabile della pagina, sempre in pixel CSS. Se si ingrandisce una pagina, si aumenta la dimensione dei pixel CSS, il che riduce naturalmente il numero di pixel CSS che possono essere adattati al dispositivo. Ecco perché le dimensioni della finestra di visualizzazione visiva si restringono quando si esegue lo zoom.

   La vista visiva non può essere più grande del contenuto della pagina.

   Le dimensioni del contenuto sono in gran parte dettate dalla finestra di layout.

   Le dimensioni della vista di layout sono impostate dalla regola meta-viewport.

   Pertanto, le dimensioni della vista visiva dovrebbero cambiare in base alle modifiche nella regola del meta-viewport.

---

Hai dato chiesto (nei commenti):

Perché è che quando c'è il contenuto che è esplicitamente più largo della finestra di layout, la finestra visiva è che si estende per adattarsi a tutto questo in? Non dovrebbe esserci una barra di scorrimento?

No, perché stai solo indicando al browser quali devono essere le dimensioni iniziali della finestra di layout, non la finestra di visualizzazione.

Se si desidera che le dimensioni della finestra di visualizzazione non si adattino alla larghezza del contenuto al caricamento della pagina, impostare la proprietà initial-scale=1 all'interno della dichiarazione meta-viewport.

---

C'è una fantastica leggere oltre il Mozilla Dev Center sul viewport meta tag: https://developer.mozilla.org/en/mobile/viewport_meta_tag