La viewport è l'area visibile di una pagina web. Non coincide sempre con la dimensione dello schermo: su desktop è la finestra del browser, su mobile è più complessa.
Il tag <meta name="viewport" ...> è essenziale per dire ai browser mobili come ridimensionare e scalare il contenuto, garantendo un'esperienza responsive ottimale.
I moderni schermi (Retina, AMOLED) hanno una densità di pixel molto alta. Il Device Pixel Ratio (DPR) indica quanti pixel fisici formano un pixel CSS.
Se il tuo DPR è 2.0, significa che uno schermo largo 390px (CSS) ha in realtà una larghezza fisica di 780px. Questo influenza la scelta delle immagini responsive (srcset).
I breakpoint sono i punti di interruzione in cui il layout del sito cambia per adattarsi alla larghezza disponibile. Framework come Tailwind CSS e Bootstrap usano approcci standard:
base) e si aggiungono regole per schermi più grandi (sm, md, lg).Usa questo tool per verificare quale breakpoint è attivo sul tuo device e testare le media queries CSS in tempo reale.