Wat is mijn schermresolutie? Viewport, DPR en breakpoints | We.Inc
Zie live uw schermresolutie, de viewportgrootte van uw browser en de device pixel ratio, plus in welk Tailwind- en Bootstrap-breakpoint u zit en een tabel met gangbare apparaatformaten.
Uw schermresolutie staat in het eerste vak op deze pagina, gemeten door uw browser bij het laden. Die wordt weergegeven in CSS-pixels; vermenigvuldig met de device pixel ratio voor fysieke pixels. De pagina toont ook de viewport van uw browser, de grootte die uw website werkelijk krijgt, en die wordt live bijgewerkt als u het venster van formaat verandert.
Wat elk getal betekent
Meting
Wat het is
Scherm
Het hele beeldscherm, in CSS-pixels
Viewport
Het zichtbare paginagebied binnen het browservenster
Device pixel ratio
Fysieke pixels per CSS-pixel (2 of 3 op de meeste telefoons)
Fysieke resolutie
Schermformaat vermenigvuldigd met de pixel ratio
Schermformaat, viewportgrootte, device pixel ratio, oriëntatie en kleurdiepte, live uitgelezen uit uw browser. Het vertelt u ook in welk Tailwind- en Bootstrap-breakpoint het huidige venster valt, met media queries om te kopiëren en een tabel met gangbare apparaatformaten.
Open de pagina. De getallen komen uit de screen- en window-objecten van uw browser, dus er wordt niets geïnstalleerd en nergens iets naartoe gestuurd.
Verander het venster van formaat of draai uw telefoon. De viewport, het breakpoint en de oriëntatie worden meteen bijgewerkt.
Bekijk het breakpointpaneel om te zien welke Tailwind- en Bootstrap-breakpoints bij de huidige breedte gelden.
Kopieer een media query voor elk breakpoint, of vergelijk uw getallen met de apparatentabel hieronder.
Ontwerp voor viewportbreedtes, niet voor schermresoluties. Een scherm van 1920 pixels kan een browservenster van 1200 pixels tonen, en dat venster is alles wat uw layout krijgt.
Test op 360 en 390 pixels breed. Veel Android-telefoons melden 360 tot 412 CSS-pixels en recente iPhones 375 tot 440, dus een layout die op 360 werkt, dekt de meeste telefoons.
Lever afbeeldingen aan op twee keer de weergavegrootte, of gebruik srcset, zodat ze scherp blijven op schermen met een pixel ratio van 2 of meer.
Browserzoom verandert zowel de viewport als de pixel ratio. Zien de getallen er vreemd uit, zet de zoom dan terug met Ctrl+0 of Cmd+0 en kijk opnieuw.
Veelgestelde vragen
Waarom lijkt mijn schermresolutie kleiner dan wat mijn monitor aangeeft?
Browsers geven formaten op in CSS-pixels. Als uw besturingssysteem het beeld schaalt, bijvoorbeeld naar 150% op een 4K-monitor of op elke Retina-Mac, beslaat één CSS-pixel meerdere fysieke pixels. Vermenigvuldig het schermformaat met de device pixel ratio die hier staat om de fysieke resolutie te krijgen.
Wat is het verschil tussen schermformaat en viewportgrootte?
Het schermformaat is het hele beeldscherm. De viewportgrootte is het deel van het browservenster dat de pagina toont, zonder adresbalk, tabbladen, werkbalken en vastgezette panelen. Websites worden opgemaakt op basis van de viewport, dus dat is het getal voor responsive design.
Wat is device pixel ratio?
Het aantal fysieke pixels dat in elke richting wordt gebruikt om één CSS-pixel te tekenen. Een ratio van 1 is een standaardscherm, 2 is gebruikelijk op laptops met schermen met hoge dichtheid en op tablets, en 3 is gebruikelijk op telefoons. De ratio verandert ook als u inzoomt op de pagina.
Welke breakpoints moet ik gebruiken voor responsive design?
Begin met de standaardwaarden van uw framework, die op deze pagina staan voor Tailwind en Bootstrap, en voeg een breakpoint toe waar uw eigen inhoud krap of uitgerekt begint te ogen. Breakpoints horen de inhoud te volgen, niet specifieke apparaten.
Wordt er iets over mijn apparaat opgeslagen?
Nee. De waarden worden in uw browser uitgelezen en op de pagina getoond. Ze worden niet naar ons gestuurd en niet opgeslagen.
CSS-pixels en fysieke pixels
Een CSS-pixel is een lengte-eenheid, geen puntje op het scherm. Op een telefoon met een pixel ratio van 3 wordt een vak van 100 bij 100 CSS-pixels getekend met 300 bij 300 fysieke pixels. Daarom vertelt een telefoon met een paneel van 1179 pixels breed aan websites dat hij 393 pixels breed is: de browser toont een pagina die op een prettige grootte leest, en tekent die met extra detail.
Voor de layout tellen alleen CSS-pixels. Voor afbeeldingen tellen de fysieke pixels ook, want een afbeelding die in CSS-pixels precies zo breed is als haar vak, oogt wazig op een scherm met een ratio van 2 of 3.
Breakpoints in de praktijk
Tailwind en Bootstrap zijn mobile first: stijlen zonder prefix gelden bij elke breedte, en elk breakpoint voegt regels toe vanaf zijn minimale breedte en hoger. md betekent in Tailwind 768 pixels en breder, niet alleen tablets.
Het breakpointpaneel op deze pagina meet de viewport op dezelfde manier als de media queries van die frameworks, dus wat het toont is de set classes die op dit moment in dit venster actief zou zijn.
Standaard min-width-breakpoints in Tailwind CSS en Bootstrap 5
Framework
Breakpoint
Geldt vanaf
Tailwind CSS
Tailwind CSS
Tailwind CSS
Tailwind CSS
Tailwind CSS
Bootstrap 5
Bootstrap 5
Bootstrap 5
Bootstrap 5
Bootstrap 5
Viewportgroottes van gangbare apparaten in CSS-pixels (staand), met pixel ratio en fysieke pixels
Type
Apparaat of instelling
Viewport (CSS px)
Pixel ratio
Fysieke pixels
Telefoon
iPhone SE (2e en 3e generatie)
Telefoon
iPhone 13 en 14
Telefoon
iPhone 15 en 16
Telefoon
iPhone 16 Pro
Telefoon
iPhone 15 Plus en 16 Plus
Telefoon
iPhone 16 Pro Max
Telefoon
Samsung Galaxy S24
Telefoon
Google Pixel 8
Tablet
iPad mini (6e generatie)
Tablet
iPad (10e generatie)
Tablet
iPad Pro 11-inch (4e generatie)
Tablet
iPad Pro 12.9-inch
Laptop
HD-laptop
Laptop
Full HD met 125% schaling
Laptop
MacBook Air 13-inch (M2, standaard)
Desktop
Full HD-monitor
Desktop
QHD-monitor
Desktop
4K-monitor met 150% schaling
Staand
Liggend
Media query voor {name} kopiëren
Scherm {sw}×{sh} (fysiek {pw}×{ph}), viewport {vw}×{vh}, device pixel ratio {dpr}
Uw scherm op dit moment
Schermresolutie (CSS px)
Beeldverhouding {ratio}
Fysieke resolutie
Scherm × device pixel ratio
Browserviewport
Het gebied waarin uw pagina wordt opgemaakt
Device pixel ratio
Verandert met browserzoom
Beschikbaar scherm
Scherm min taakbalk of Dock
Oriëntatie en kleur
{orientation}, {depth}-bit
Touchscreen gedetecteerd
Geen touchscreen gedetecteerd
Deze getallen kopiëren
Uw scherm wordt uitgelezen. Hiervoor is JavaScript nodig.
In welk breakpoint u zit
Gemeten op de viewportbreedte{width}. Verander het venster van formaat om het te zien veranderen.