Når vi taler om mobiltelefoner, især klassikere som iPhone 5, er skærmen et centralt element. Det er her, vi oplever vores billeder, ser videoer og interagerer med apps. Men bag den tilsyneladende enkle skærm gemmer sig tekniske specifikationer som opløsning, pixeltæthed og visningsområde (viewport), som er afgørende for, hvordan indhold præsenteres. For fotografer og dem, der arbejder med digitalt indhold, er det vigtigt at forstå disse begreber, især når det kommer til enheder som iPhone 5, der introducerede vigtige fremskridt inden for mobilskærme.
iPhone 5, der blev lanceret i september 2012, var en bemærkelsesværdig enhed på sin tid, delvist på grund af sin forbedrede skærm. Selvom den fysiske størrelse på 4,0 tommer kan virke lille efter nutidens standarder, bød den på en skarphed og klarhed, der var banebrydende. Denne skarphed skyldtes en kombination af høj opløsning og en teknologi, Apple kaldte 'Retina'-display. Men hvordan adskiller skærmens faktiske opløsning sig fra det, vi kalder dens visningsområde, og hvorfor er denne forskel relevant?
Hvad er Opløsning og Visningsområde?
Før vi dykker ned i iPhone 5's specifikke tal, lad os definere de grundlæggende termer. Skærmens opløsning refererer til det samlede antal fysiske pixels, der udgør skærmen. Pixels er de små farvede punkter, der tilsammen danner billedet, du ser. En opløsning angives typisk som bredde x højde i pixels.
Visningsområdet, eller viewport, er derimod det område, der er tilgængeligt for at vise webindhold eller apps i logiske pixels, ofte kaldet CSS-pixels eller enhedsuafhængige pixels. På moderne smartphones er visningsområdet ofte mindre end den fysiske opløsning i pixels. Dette skyldes, at styresystemet og browsere "lyver" over for indholdet om skærmens faktiske størrelse for at gøre websites og apps mere brugbare på små skærme med meget høj pixeltæthed. Forestil dig at en hjemmeside designet til en bred computerskærm skulle vises i fuld opløsning på en lille mobilskærm – alt ville blive mikroskopisk småt. Visningsområdet løser dette ved at præsentere et mindre, mere håndterbart 'virtuelt' skærmområde, som indholdet kan tilpasse sig efter.
iPhone 5's Skærmspecifikationer
iPhone 5 havde en fysisk skærmstørrelse på 4,0 tommer diagonalt. De fysiske dimensioner for selve enheden var 123,8 x 58,6 x 7,6 mm (højde x bredde x tykkelse). Skærmens andel af enhedens front var omkring 60,8%.
Skærmens faktiske opløsning i pixels var 640 x 1136 pixels. Dette gav en samlet mængde pixels, der kunne vise et billede med denne detaljegrad.
Men når det kom til visningsområdet for webindhold og apps, rapporterede iPhone 5 et visningsområde på 320 x 568 pixels. Dette er præcis halvdelen af den fysiske opløsning i både bredde og højde.
Pixeltæthed og Pixel Forhold (Retina)
Forskellen mellem opløsning (640x1136) og visningsområde (320x568) fører os til begrebet pixeltæthed og pixel forhold. Pixeltæthed måles typisk i PPI (Pixels Per Inch) og angiver, hvor mange fysiske pixels der findes per tomme på skærmen. En høj PPI betyder, at pixels er pakket tæt sammen, hvilket resulterer i et skarpere billede, hvor individuelle pixels er svære at skelne for det menneskelige øje på normal betragtningsafstand.
iPhone 5 havde en pixeltæthed på cirka 326 PPI. Dette var på det tidspunkt anset for at være en meget høj tæthed, der kvalificerede sig til Apples 'Retina'-mærkning. Konceptet bag Retina var, at skærmen havde en pixeltæthed så høj, at det menneskelige øje ikke kunne skelne de enkelte pixels ved en typisk betragtningsafstand.
Forholdet mellem den fysiske opløsning og visningsområdet kaldes enhedens pixel forhold (Device Pixel Ratio, DPR) eller CSS Pixel Ratio. På iPhone 5 var dette forhold 2. Det betyder, at hver logisk CSS-pixel (i visningsområdet på 320x568) blev gengivet ved hjælp af 2x2 = 4 fysiske pixels på skærmen (i opløsningen 640x1136).
Dette 2x pixel forhold er kernen i Retina-displayet. Det tillader, at indhold, der er designet til det mindre visningsområde (f.eks. en billedstørrelse på 100x100 CSS-pixels), kan vises med en meget højere detaljegrad ved at bruge 200x200 fysiske pixels. Dette er især vigtigt for visning af billeder og fine grafiske elementer, som fremstår langt skarpere og mere detaljerede, end de ville gøre på en skærm med et pixel forhold på 1.
Opløsning vs. Visningsområde: En Sammenligning
For at opsummere forskellen for iPhone 5:
| Specifikation | Værdi (iPhone 5) | Beskrivelse |
|---|---|---|
| Fysisk Skærmstørrelse | 4.0 tommer | Den diagonale måling af skærmen. |
| Fysisk Opløsning | 640 x 1136 pixels | Det faktiske antal pixels på skærmen (bredde x højde). |
| Pixeltæthed (PPI) | ~326 PPI | Antallet af fysiske pixels per tomme. |
| Logisk Visningsområde (Viewport) | 320 x 568 pixels | Det område, der bruges til layout af indhold (bredde x højde i CSS-pixels). |
| Pixel Forhold (DPR) | 2 | Forholdet mellem fysiske pixels og logiske pixels (2:1). |
Denne tabel illustrerer tydeligt, at selvom skærmen fysisk har 640 pixels i bredden, opfører den sig som om den kun er 320 pixels bred, når det kommer til placering af elementer på en webside eller i en app. Hver 'logisk' pixel på 1x1 i visningsområdet korresponderer med et 2x2 gitter af fysiske pixels på skærmen.
Betydning for Fotografi og Webdesign
For fotografer, der ønsker at vise deres arbejde online, eller webudviklere, der designer websites, har iPhone 5's visningsområde og pixel forhold stor betydning:
- Responsivt Design: Websites skal tilpasses visningsområdet på 320x568 pixels (eller 568x320 i landskabstilstand) for at sikre, at layoutet ser korrekt ud og er brugbart på en iPhone 5. Media queries i CSS bruger visningsområdets dimensioner til at anvende specifikke stilarter.
- Billedkvalitet på Retina: På grund af pixel forholdet på 2 kan billeder, der er optimeret til skærme med et forhold på 1, se uskarpe ud. For at billeder skal fremstå knivskarpt på en iPhone 5's Retina-display, bør man levere billeder med dobbelt opløsning (f.eks. et billede, der skal fylde 300 CSS-pixels i bredden, bør have en filstørrelse på mindst 600 fysiske pixels i bredden). Dette gøres ofte ved hjælp af `srcset` attributten i HTML eller specifikke CSS media queries for Retina-skærme.
- Filstørrelse vs. Kvalitet: At levere billeder i dobbelt opløsning betyder større filstørrelser, hvilket kan påvirke indlæsningstider. Det er en balancegang mellem at opnå maksimal skarphed og at holde websitet hurtigt.
CSS Media Queries for iPhone 5
Udviklere bruger CSS Media Queries til at målrette specifikke enheder eller skærmkarakteristika. For iPhone 5 er de mest relevante media queries baseret på visningsområdets dimensioner og pixel forhold:
- Generel mobil (inkluderer iPhone 5):
@media only screen and (min-width: 320px) and (max-width: 767px) { /* Stilarter her */ } - iPhone 5 Portræt (baseret på visningsområde):
@media only screen and (min-width: 320px) and (orientation: portrait) { /* Stilarter her */ } - iPhone 5 Landskab (baseret på visningsområde):
@media only screen and (min-width: 568px) and (orientation: landscape) { /* Stilarter her */ } - iPhone 5 Retina (baseret på pixel forhold):
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { /* Retina-stilarter her */ }(Bemærk de forskellige præfikser for browserkompatibilitet og alternative enheder som dpi/dppx).
Disse media queries gør det muligt at finjustere layout, skriftstørrelser og billedvisning specifikt for enheder som iPhone 5 med dens karakteristiske visningsområde og Retina-display.
Ofte Stillede Spørgsmål om iPhone 5 Skærmen
Her er svar på nogle almindelige spørgsmål relateret til iPhone 5's skærm:
Hvad er den fysiske størrelse på iPhone 5-skærmen?
Skærmen er 4,0 tommer målt diagonalt.
Hvad er opløsningen på iPhone 5?
Opløsningen er 640 pixels i bredden og 1136 pixels i højden (640x1136 px).
Hvad er visningsområdet (viewport) på iPhone 5?
Visningsområdet er 320 pixels i bredden og 568 pixels i højden (320x568 px) i portræt-tilstand.
Hvad er pixel forholdet (Device Pixel Ratio) på iPhone 5?
Pixel forholdet er 2.
Hvad betyder det, at iPhone 5 har et pixel forhold på 2?
Det betyder, at hver logisk CSS-pixel (i visningsområdet) gengives ved hjælp af 2x2 = 4 fysiske pixels på skærmen. Dette resulterer i et skarpere billede, kendt som 'Retina' display.
Hvordan påvirker iPhone 5's skærmvisning af billeder?
For at billeder skal se skarpe ud på iPhone 5's Retina-display, bør de leveres med dobbelt opløsning (f.eks. et billede, der skal fylde 320px i bredden i layoutet, bør have en filstørrelse på 640px i bredden).
Konklusion
iPhone 5's skærm, med sin fysiske opløsning på 640x1136 pixels, men et logisk visningsområde på 320x568 pixels og et pixel forhold på 2, repræsenterede et vigtigt skridt inden for mobilskærmteknologi, især med introduktionen af 'Retina'-displayet på denne model (selvom Retina-konceptet blev introduceret med iPhone 4). Forståelsen af forskellen mellem opløsning og visningsområde er fundamental for alle, der arbejder med digitalt indhold og ønsker at sikre, at deres billeder og layouts præsenteres korrekt og optimalt på tværs af forskellige enheder, inklusive klassikere som iPhone 5. Selvom nyere iPhones har ændret dimensioner og pixel forhold, er principperne bag visningsområde og Retina-display stadig yderst relevante i dagens verden af responsivt design og billedoptimering.
Hvis du vil læse andre artikler, der ligner iPhone 5: Forstå Skærm og Visningsområde, kan du besøge kategorien Fotografi.