Calcolatore Viewport & Risoluzione

Viewport Attuale
0 x 0
px

Breakpoint Attivi

Tailwind
< sm
sm
md
lg
xl
2xl
Scale: 0 - 2000px

Schermo Fisico

Dimensioni0 x 0
Pixel Ratio (DPR)1.00
Orientamentounknown
TouchNo

Browser & OS

Browser
OS / Platform
User Agent
Reading...

Preferences

Color SchemeLight
Framework Breakpoints Reference
sm (TW) 640px
md (TW) 768px
lg (TW) 1024px
xl (TW) 1280px
Pubblicità

Cos'è la Viewport?

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.

Pixel Fisici vs CSS (DPR)

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).

Breakpoint e Responsive Design

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:

  • Mobile First (es. Tailwind): Si parte dallo stile per schermi piccoli (base) e si aggiungono regole per schermi più grandi (sm, md, lg).
  • Desktop First: Si parte dal desktop e si adatta per schermi più piccoli (meno comune oggi).

Usa questo tool per verificare quale breakpoint è attivo sul tuo device e testare le media queries CSS in tempo reale.

Pubblicità