Effetti collaterali della rimozione di "larghezza = larghezza dispositivo" dal meta tag della finestra quando è impostata anche "scala iniziale = 1,0"

Sebbene il <meta name="viewport">tag non sia standardizzato, "è rispettato dalla maggior parte dei browser mobili a causa del dominio di fatto".

Un aspetto negativo di non essere un vero standard web è la documentazione dettagliata non è disponibile come altri standard. Il gruppo di lavoro CSS ha una specifica per questo, quindi è quello che sto usando principalmente come lavoro autorevole.

La mia domanda principale è:

Quale sarebbe la differenza percepita tra le seguenti dichiarazioni?

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

<meta name="viewport" content="initial-scale=1.0">

In alternativa, quali sono le differenze tra questi due at- rule CSS di @viewport :

/* Translated from <meta name="viewport" content="width=device-width, initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: 100vw;
}

/* Translated from <meta name="viewport" content="initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: extend-to-zoom;
}

Come sono arrivato a quelle @viewporttraduzioni:

width=device-width per min-width: extend-to-zoom; max-width: 100vw;

Il documento Livello 1 del modulo di adattamento dei dispositivi CSS afferma:

Le proprietà widthe heightviewport <META>sono tradotte in widthe heightdescrittori, impostando min-width/ min-heightvalue su extend-to-zoome max-width/ max-heightvalue sulla lunghezza dalla viewport.

Danno inoltre un esempio :

Questo <META>elemento:

<meta name="viewport" content="width=500, height=600">

si traduce in:

@viewport {
    width: extend-to-zoom 500px;
    height: extend-to-zoom 600px;
}

Il widthdescrittore abbreviato è descritto come:

Questo è un descrittore abbreviato per impostare sia min-widthe max-width. Un <viewport-length>valore imposterà entrambi min-widthe max-widthsu quel valore. Due <viewport-length>valori verranno impostati min-widthsul primo e max-widthsul secondo.

Quindi è logico che width: extend-to-zoom 500px;sia equivalente a min-width: extend-to-zoom; max-width: 500px;.

Questo lascia solo la 100vwparte. All'interno della sezione 10.4 , spiegano:

device-widthe device-heighttradurre rispettivamente a 100vw e 100vh

Quindi possiamo finalmente vedere come width=device-widthviene tradotto min-width: extend-to-zoom; max-width: 100vw;.

initial-scale=1.0 per zoom: 1.0; width: extend-to-zoom;

Questo è un esempio testuale :

Questo <META>elemento:

<meta name="viewport" content="initial-scale=1.0">

si traduce in:

@viewport {
    zoom: 1.0;
    width: extend-to-zoom;
}

L'altra domanda che ho qui è: qual è esattamente il extend-to-zoomvalore?

La documentazione su di esso e la sua procedura di risoluzione sono difficili da comprendere. Se qualcuno mi può indirizzare verso ulteriori esempi su questo sarebbe molto apprezzato.

Oltre a tutto quanto sopra, ho creato un sito veloce - https://romellem.github.io/temp-site/viewport/ - per testare alcune configurazioni di viewport.

Vale a dire:

• content = "larghezza = larghezza dispositivo, scala iniziale = 1,0"
• content = "iniziale scala = 1,0"

Questo può aiutare con i test.

Prima di approfondire ciò che stai chiedendo, esaminiamo un po 'perché il viewportmeta tag esiste in primo luogo. Ecco cosa ho raccolto.

Perché abbiamo bisogno del viewporttag?

Una finestra è un'area in cui è possibile visualizzare il contenuto Web. Di solito, la pagina renderizzata (contenuto web) è più grande della finestra. Di conseguenza, di solito utilizziamo le barre di scorrimento per visualizzare il contenuto nascosto (poiché il viewport non può visualizzare tutto). Citato dal modulo adattamento dispositivo CSS livello 1 :

La vista stretta è un problema per i documenti progettati per apparire bene nei browser desktop. Il risultato è che i fornitori di browser per dispositivi mobili utilizzano un'iniziale fissa contenente una dimensione di blocco diversa dalla dimensione della finestra e vicina a quella di una tipica finestra del browser desktop. Oltre allo scorrimento o alla panoramica, lo zoom viene spesso utilizzato per passare da una panoramica del documento e ingrandire determinate aree del documento da leggere e interagire.

Nei dispositivi mobili (e altri dispositivi più piccoli), il blocco contenitore iniziale è generalmente più grande della finestra. Ad esempio, un dispositivo mobile con una larghezza dello schermo di 640pxpotrebbe avere un blocco contenente iniziale di 980px. In questo caso, il blocco contenitore iniziale viene ridotto in 640pxmodo da poterlo adattare allo schermo mobile. Questa 640pxlarghezza (larghezza dello schermo) è ciò che viene chiamato initial-widthdel viewport che sarà pertinente alla nostra discussione.

Quindi .... Perché abbiamo bisogno di questo viewporttag? Bene, al giorno d'oggi, abbiamo query multimediali che ci consentono di progettare per dispositivi mobili. Tuttavia, questa query multimediale dipende dalla larghezza effettiva della finestra. Nei dispositivi mobili, l'agente utente imposta automaticamente la dimensione della finestra iniziale su una diversa fissa (di solito più grande della dimensione della finestra iniziale). Pertanto, se la larghezza del viewport di un dispositivo mobile è fissa, le regole CSS che utilizziamo nelle query multimediali non verranno eseguite semplicemente perché la larghezza del viewport non cambia mai. Usando il viewporttag, possiamo controllare la larghezza effettiva del viewport (dopo essere stato disegnato da UA). Citato da MDN :

Tuttavia, questo meccanismo non è così buono per le pagine che sono ottimizzate per schermi stretti utilizzando le query multimediali - ad esempio se la finestra virtuale è 980px, le query multimediali che entrano in 640px o 480px o meno non verranno mai utilizzate, limitando l'efficacia di tale tecniche di progettazione reattiva.

Si noti che il viewporttag può modificare anche l'altezza effettiva della finestra, non solo la larghezza

viewport del tag width

Il widthin un viewporttag è tradotto per max-widthla @viewportregola. Quando si dichiara widthas device-width, viene tradotto 100%nella @viewportregola. Il valore percentuale viene risolto in base al valore initial-widthdella finestra. Quindi, se stiamo ancora usando l'esempio sopra, la max-widthrisoluzione si risolverà in un valore di 640px. Come hai scoperto, questo specifica solo il max-width. Lo min-widthsarà automaticamente extend-to-zoom.

extend-to-zoom

La tua domanda era: qual è esattamente il valore di extender-zoom ? Da quello che ho raccolto, è il valore utilizzato per supportare il viewport che si estende per adattarsi all'area di visualizzazione a un determinato livello di zoom. In altre parole, è un valore della dimensione della finestra che cambia in base al valore di zoom specificato. Un esempio? Dato che il max-zoomvalore del foglio di stile UA è 5.0e initial-widthè 320px, <meta name="viewport" content="width=10">si risolverà in una larghezza effettiva iniziale di 64px. Questo ha senso perché se un dispositivo ha solo 320 px e può essere ingrandito solo 5xil valore normale, allora la dimensione minima del viewport sarebbe 320px divided by 5, il che significa mostrare solo 64 px alla volta ( e non 10pxperché ciò richiederebbe lo zoom 32x!). Questo valore verrà utilizzato dall'algoritmo per determinare come estendere (modificare) i valori min-widthe max-width, che avranno un ruolo nel determinare la larghezza effettiva della finestra.

Mettere tutto insieme

Quindi, in sostanza, qual è la differenza tra <meta name="viewport" content="width=device-width, initial-scale=1.0">e <meta name="viewport" content="initial-scale=1.0">? Ripeti semplicemente i passaggi dell'algoritmo ( questo e questo ). Facciamo prima quest'ultimo (quello senza widthattributo). (Supponiamo che sia initial-widthil viewport 640px.)

• widthnon è impostato, ciò si traduce in max-widthed min-widthessere extend-to-zoomnella @viewportregola.
• initial-scalelo è 1.0. Questo significa che lo zoomè anche il valore1.0
• Let determinazioneextend-to-zoom . passi:
  1. extend-zoom = MIN(zoom, max-zoom). L' MINoperazione si risolve nel valore che non è auto. Ecco, zoomè 1.0ed max-zoomè auto. Questo significa che lo extend-zoomè1.0
  2. extend-width = initial-width / extend-zoom. Questo è facile; dividere 640 per 1. Ottieni extend-widthè uguale a640
  3. Poiché extend-zoomnon è- auto, passeremo al secondo condizionale. max-widthè davvero extend-to-zoom, questo significa che max-widthsarà impostato su extend-width. Così,max-width = 640
  4. min-widthè anche extend-to-zoom, questo significa impostare min-widthsu max-width. Noi abbiamomin-width = 640
• Dopo aver risolto iautoextend-to-zoom valori non (cioè i ) per max-widthe min-width. Possiamo procedere alla procedura successiva . Perché min-widtho max-widthno auto, useremo il primo ifnella procedura, impostando così il viewport effettivo iniziale widthsu MAX(min-width, MIN(max-width, initial-width)), che equivale a MAX(640, MIN(640, 640)). Questo si risolve in 640per la finestra effettiva inizialewidth
• Passiamo alla procedura successiva . In questo passaggio, widthnon lo è auto. Il valore non viene modificato e si finisce con la visualizzazione effettiva widthdi640px

Facciamo il primo.

• widthè impostato, questo si traduce in max-widthessere 100%( 640pxnel nostro caso) ed min-widthessere extend-to-zoomnella @viewportregola.
• initial-scalelo è 1.0. Questo significa che lo zoomè anche il valore1.0
• Let determinazioneextend-to-zoom . Se segui attentamente i passaggi (quasi come sopra), finirai con un max-widthdi 640pxe un min-widthdi 640px.
• Probabilmente puoi vedere lo schema ora. Otterremo la larghezza effettiva del viewport di 640px.

Quindi qual è la differenza percepita? In sostanza nessuno . Entrambi fanno la stessa cosa. Spero che la mia spiegazione mi aiuti ;-) Se qualcosa non va, dimmelo.