Che cosa cambia esattamente nel rendering css, quando i browser desktop ingrandiscono o rimpiccioliscono su un sito web?

Question

In che modo la progettazione viene ingrandita o ridotta? Sto cercando di capire cosa succede esattamente a livello CSS e quali sono le conseguenze per i diversi metodi di dimensionamento (px, em, rem, ecc.).

---

A proposito, sono principalmente interessato al comportamento dello zoom per i moderni browser desktop. (Sospetto che il browser mobile sia un ingrandimento lineare dell'intera pagina dopo averlo eseguito normalmente, e sappia che i browser vecchio stile incrementano solo la dimensione del font di base). Ciò che non è chiaro tuttavia, è ciò che i browser moderni (ad esempio le ultime versioni di Chrome o FF) fanno esattamente quando l'utente preme Ctrl + o Ctrl -.

Anche loro rendono semplicemente la pagina normalmente (cioè al 100%) e quindi semplicemente ingrandiscono l'immagine renderizzata? Perché FF sembra ancora rispettare le larghezze%, ad esempio, quindi non sembra un ingrandimento diretto.

Answer 1

Lo zoom come implementato nei browser moderni non consiste nient'altro che "allungare" i pixel. Cioè, la larghezza dell'elemento non è cambiata da 128 a 256 pixel; invece i pixel effettivi sono raddoppiati. Formalmente, l'elemento ha ancora una larghezza di 128 pixel CSS, anche se capita di prendere lo spazio di 256 pixel del dispositivo.

In altre parole, lo zoom al 200% aumenta di un pixel CSS fino a quattro volte la dimensione dei pixel di un dispositivo. (Due volte la larghezza, due volte l'altezza, produce quattro volte in totale).

Per una spiegazione dettagliata si poteva leggere la pagina seguente: Concept of device pixels and CSS pixels

Answer 2

Se si fa riferimento a ciò che accade all'interno del browser quando si esegue lo zoom, dipende dal browser utilizzato e dal dispositivo. Credo che il tipo di unità di misura che usi nel tuo CSS possa essere anche un fattore (%, em e px). In genere, ad esempio, il CSS applicato ai font, viene sottoposto a rendering di nuovo quando si esegue lo zoom. Lo stesso con i valori delle proprietà di sfondo. Ma in molti browser questo re-rendering avviene così velocemente che non dovresti nemmeno notarlo, a meno che non ci sia un problema di prestazioni che sta rallentando il browser (che potrebbe essere legato al codice o al sistema).