Mobil skjermstørrelse og nettbrett (iPhone, iPad, Galaxy, etc. ), Klassifiser skjermstørrelsene på iOS -enheter – Lag en responsiv applikasjon med UIKIT for iOS – OpenClassrooms

Lag en responsiv applikasjon med UIKIT for iOS

iPhone 6+, 6s+, 7+, 8+

Mobil skjermstørrelse og nettbrett

Størrelse og skjermoppløsning er to viktige funksjoner å ta hensyn til når du velger en smarttelefon eller nettbrett. Illustrasjonen nedenfor lar deg Visuelt sammenligne størrelsesordrer (Diagonaler i sittende og CM) av de vanligste skjermstørrelsene på bærbare enheter.

Sammenligning av størrelser D

Spesielt for smarttelefoner er skjermer av bærbare enheter generelt mer og mer store. Denne økningen i størrelse har sine fordeler, men også ulempene:

  • Trøst i bruk
    Jo større skjermen, jo mer behagelig vil det være å bruke applikasjoner, navigere på nettet eller se filmer og serier. Tastene på det virtuelle tastaturet vil også være større.
  • Transportbarhet og manøvrerbarhet
    En enhet med en stor skjerm vil være mer klumpete og mindre hendig, spesielt for smarttelefoner som det ofte vil være nødvendig å bruke begge hendene for å nå visse deler av berøringsskjermen.

Parallelt med størrelsen, forhold Skjermbilder (høyde/breddeforhold) har også utviklet seg over tid. Denne utviklingen skyldes hovedsakelig demokratisering av “grenseløse” mobiltelefoner, det vil si uten grense- eller mottaksknapper.

Forholdstall d

Skjermen er større, men den er også mer langstrakt (og med avrundede hjørner). Formatet økte gradvis fra den klassiske 16/9 til et gjennomsnitt på 19.5/9. Du vil også legge merke til at på mange modeller (spesielt iPhone) er en del av skjermoverflaten fra Nibbled øverst med et hakk (“hakket”) som inkluderer sensorer, høyttaleren og kameraet frontal.

Smarttelefonstørrelse

Seksjonene nedenfor har en Panelrepresentant for skjermstørrelser De mest populære iOS- og Android -modellene (Apple iPhone og Samsung Galaxy Ranges spesielt).

Skjermspesifikasjoner for hovedmodellene

Diagonale lengder på Apple mobile skjermer

Apple mobile skjermstørrelse

Ved enkelhet har øvre hakk (hakk) blitt representert på en identisk måte på hvert visuelt, men det kan være annerledes avhengig av versjonene (12, 13, 14, Max, Pro, More, etc.)).

Modell Størrelse (tomme) Størrelse (cm) Definisjon (piksler) Oppløsning (PPP)
IPhone 6 4.7 “ 11,9 cm 1334 x 750 px 326 s
iPhone 6s 4.7 “ 11,9 cm 1334 x 750 px 326 s
iPhone 7 4.7 “ 11,9 cm 1334 x 750 px 326 s
iPhone 8 4.7 “ 11,9 cm 1334 x 750 px 326 s
iPhone 6 Plus 5.5 “ 14 cm 1920 x 1080 px 401 ppi
iPhone 6S Plus 5.5 “ 14 cm 1920 x 1080 px 401 ppi
iPhone 7 Plus 5.5 “ 14 cm 1920 x 1080 px 401 ppi
iPhone 8 Plus 5.5 “ 14 cm 1920 x 1080 px 401 ppi
iPhone X 5.8 “ 14,7 cm 2436 x 1125 px 458 ppi
iPhone XS 5.8 “ 14,7 cm 2436 x 1125 px 458 ppi
iPhone 11 Pro 5.8 “ 14,7 cm 2436 x 1125 px 458 ppi
iPhone XR 6.1 “ 15,5 cm 1792 x 828 px 326 s
iPhone 11 6.1 “ 15,5 cm 1792 x 828 px 326 s
iPhone XS Maks 6.5 “ 16,5 cm 2688 x 1242 px 458 ppi
iPhone 11 Pro Max 6.5 “ 16,5 cm 2688 x 1242 px 458 ppi
iPhone 12/13 (mini) 5.4 “ 13,7 cm 2340 x 1080 px 476 PPP
iPhone 12/13 (Pro og standard) / 14 6.1 “ 15,5 cm 2352 x 1170 px 460 ppi
iPhone 14 Pro 6.1 “ 15,5 cm 2556 x 1179 px 460 ppi
iPhone 12/13 (Pro Max) / 14 Plus 6.7 “ 17 cm 2778 x 1284 px 458 ppi
iPhone 14 Pro Max 6.7 “ 17 cm 2796 x 1290 px 460 ppi

Lengden som er angitt tilsvarer den for diagonalen (i tommer og cm).

Diagrammet og tabellen over illustrerer tydelig trenden for å utvide mobile skjermstørrelser over tid. I tillegg, for en mer detaljert sammenligning av de forskjellige modellene, kan du også bruke iPhone Comparator (på Apple -nettstedet).

Med filtreringskriterier (Baker Site)
Hva er OPP -oppløsning ?

Det handler om Pixeltetthet av skjermen. PPP -enhet betyr faktisk Pixel per tomme (På engelsk PPI, piksler per tomme). Denne verdien indikerer således antall piksler på en tommel med lengde (2.54 cm). Jo høyere IT, jo mer presis vil skjermen være.

Forklarende diagram over oppløsningen uttrykt i PPP

Nåværende smarttelefonskjermer (for eksempel Apple Retina) har en veldig høy oppløsning og piksler er generelt ikke skillebare.

For mer informasjon, se siden definisjon og skjermoppløsning.

Skjermspesifikasjoner for hovedmodellene

Modell Størrelse (tomme) Størrelse (cm) Definisjon (piksler) Oppløsning (PPP)
Galaxy S8 5.8 “ 14,7 cm 2960 x 1440 px ~ 570 ppi
Galaxy S9 5.8 “ 14,7 cm 2960 x 1440 px ~ 570 ppi
Galaxy S10E 5.8 “ 14,7 cm 2280 x 1080 px ~ 438 ppi
Galaxy S10 6.1 “ 15,5 cm 3040 x 1440 px ~ 550 ppi
Galaxy S8+ 6.2 “ 15,7 cm 2960 x 1440 px ~ 529 PPP
Galaxy S9+ 6.2 “ 15,7 cm 2960 x 1440 px ~ 529 PPP
Galaxy S20 6.2 “ 15,7 cm 3200 x 1440 px ~ 563 PPP
Galaxy S21 5G 6.2 “ 15,7 cm 2400 x 1080 px ~ 421 PPP
Galaxy S10+ 6.4 “ 16,3 cm 3040 x 1440 px ~ 522 PPP
Galaxy S10 5G 6.7 “ 17 cm 3040 x 1440 px ~ 505 ppi
Galaxy S20+ 6.7 “ 17 cm 3200 x 1440 px ~ 525 ppi
Galaxy S21+ 5G 6.7 “ 17 cm 2400 x 1080 px ~ 394 PPP
Galaxy S21 Ultra 5G 6.8 “ 17,3 cm 3200 x 1440 px ~ 515 ppi
Galaxy S20 Ultra 6.9 “ 17,5 cm 3200 x 1440 px ~ 511 PPP
Galaxy S22/S23 6.1 “ 15,5 cm 2340 x 1080 px ~ 422 PPP
Galaxy S22+/S23+ 6.6 “ 16,8 cm 2340 x 1080 px ~ 390 ppi
Galaxy S22 Ultra/S23 Ultra 6.8 “ 17,3 cm 3088 x 1440 px ~ 501 ppi

Lengden som er angitt tilsvarer den for diagonalen (i tommer og cm).

I likhet med konkurrenten Apple, tilbyr Samsung en smarttelefon -komparator (Samsung Site.com) for å se forskjellene mellom deres forskjellige modeller (skjermspesifikasjoner, men også minne, prosessor, dimensjoner osv.)). Dessverre vil du bare finne de nyeste produktene deres.

Med filtreringskriterier (Baker Site)

Spesifikasjoner for hovedmodellene

Modell Størrelse (tomme) Størrelse (cm) Definisjon (piksler) Oppløsning (PPP)
Redmi 9 6.53 “ 16,6 cm 2340 x 1080 px ~ 394 PPP
Redmi (merknad) 10/10s 6.5 “ 16,5 cm 2400 x 1080 px ~ 405 ppi
Redmi Note 11/11s 6.43 “ 16,3 cm 2400 x 1080 px ~ 409 PPP
Redmi Note 11 Pro / Pro+ 6.67 “ 16,9 cm 2400 x 1080 px ~ 395 ppi
Xiaomi 12/12x 6.28 “ 16 cm 2400 x 1080 px ~ 419 PPP
Xiaomi 12 Pro / 13 Pro 6.73 “ 17,1 cm 3200 x 1440 px ~ 522 PPP
Xiaomi 13 6.36 “ 16,2 cm 2400 x 1080 px ~ 414 PPP

Lengden som er angitt tilsvarer den for diagonalen (i tommer og cm).

For å se alle tekniske spesifikasjoner for Xiaomi -smarttelefoner (serien er relativt bredt), må du ta kontakt med informasjonssiden på nettstedet deres, i MI.com.

Med filtreringskriterier (Baker Site)

Spesifikasjoner for hovedmodellene

Modell Størrelse (tomme) Størrelse (cm) Definisjon (piksler) Oppløsning (PPP)
P30 6.1 “ 15,5 cm 2340 x 1080 px ~ 422 PPP
P40 6.1 “ 15,5 cm 2340 x 1080 px ~ 422 PPP
P30 Lite 6.15 “ 15,6 cm 2312 x 1080 px ~ 415 PPP
P40 lite 6.4 “ 16,3 cm 2310 x 1080 px ~ 398 ppi
P30 Pro 6.47 “ 16,4 cm 2340 x 1080 px ~ 398 ppi
P40 Pro 6.58 “ 16,7 cm 2640 x 1200 px ~ 441 PPP
P60 Pro 6.67 “ 16,9 cm 2700 x 1200 px ~ 443 ppi
Nova 9 6.57 “ 16,7 cm 2340 x 1080 px ~ 392 PPP
Nova 9 er 6.78 “ 17,2 cm 2388 x 1080 px ~ 387 ppi
Kompis 50 pro 6.74 “ 17,1 cm 2616 x 1212 px ~ 428 ppi
Kompis x3 (utfoldet) 7.85 “ 19,9 cm 2496 x 2224 px ~ 426 PPP

Lengden som er angitt tilsvarer den for diagonalen (i tommer og cm).

For å lære mer om størrelser og/eller tekniske egenskaper (dimensjoner, minne, prosessor, batteri, fotosensorer, etc.), kan du bruke Huawei -sammenligningsverktøyet (på nettstedet deres).

Med filtreringskriterier (Baker Site)

Tablettstørrelse

Du finner nedenfor skjermstørrelsene på de vanligste nettbrett på markedet (Apple iPad og Samsung Galaxy Tab). Det kan være flere varianter av disse modellene, men egenskapene er generelt like.

Spesifikasjoner for hovedmodellene

Diagonale lengder på skjermene til Apple -tablettene

Modell Størrelse (tomme) Størrelse (cm) Definisjon (piksler) Oppløsning (PPP)
iPad Mini (6. gen.)) 8.3 “ 21,1 cm 2266 x 1488 px 326 s
iPad (9. gen.)) 10.2 “ 25,9 cm 2160 x 1620 px 264 PPP
iPad (10. gen.)) 10.9 “ 27,7 cm 2360 x 1640 px 264 PPP
iPad Air (5. gen.)) 10.9 “ 27,7 cm 2360 x 1640 px 264 PPP
iPad Pro 11 “(4. gen.)) 11 “ 27,9 cm 2388 x 1668 px 264 PPP
iPad Pro 12.9 “(6. gen.)) 12.9 “ 32,8 cm 2732 x 2048 px 264 PPP

Lengden som er angitt tilsvarer den for diagonalen (i tommer og cm).

For mer informasjon om de forskjellige iPad -modellene (komplette egenskaper), ikke nøl med å bruke iPad Comparator (på Apple.com). Du finner alle det visuelle, variasjonene etter farge og de komplette tekniske spesifikasjonene.

Med filtreringskriterier (Baker Site)

Spesifikasjoner for hovedmodellene

Diagonale lengder på skjermene til Samsung Galaxy Tab Touch Pads

Modell Størrelse (tomme) Størrelse (cm) Definisjon (piksler) Oppløsning (PPP)
Galaxy Tab A7 Lite 8,7 “ 22,1 cm 1340 x 800 px ~ 179 PPP
Galaxy Tab A8 10.5 “ 26,7 cm 1920 x 1200 px ~ 216 PPP
Galaxy Tab S7 / S8 11 “ 27,9 cm 2560 x 1600 px ~ 274 PPP
Galaxy Tab S7+ / S8+ 12.4 “ 31,5 cm 2800 x 1752 px ~ 266 PPP
Galaxy Tab S8 Ultra 14.6 “ 37,1 cm 2960 x 1848 px ~ 239 PPP

Lag en responsiv applikasjon med UIKIT for iOS

For rolig nærmer seg spørsmålet om screening av skjermstørrelser, la oss starte med å gå rundt i størrelsene du må administrere i iOS.

Forstå skjermstørrelsene

Vi snakker vanligvis om skjermstørrelser i tomme (bemerket ”), og vi Mål diagonalen.

I iOS er det to store familier i størrelser:

  • iPhone -størrelser;
  • iPad -størrelser.

I hver familie er det flere forskjellige størrelser, som finnes i diagrammet nedenfor.

De forskjellige størrelsene i iOS er oppsummert i tabellen nedenfor

Enhet

Størrelse

iPad Pro Big 1, 2

iPad Pro Small 2

ipad pro liten 1

iPhone Pro Max 12, 13

iPhone 11 Pro Max

iPhone 11, 12, 13

iPhone Pro 12, 13

iPhone 6+, 6s+, 7+, 8+

iPhone 6, 6s, 7, 8

Denne tabellen oppsummerer Tolv størrelser Eksisterende i iOS -familien med den uttømmende listen over alle tilknyttede iOS -enheter. Du trenger ikke at du vet alt dette utenat. Vet bare at det er seks størrelser for iPhone og seks for iPad. Og disse tolv størrelsene, kan du visualisere dem alle i storyboardet !

Visualiser størrelsene i storyboardet

For å endre størrelsen på grensesnittet i storyboardet, bruk størrelsesvelgeren. Nederst til venstre på storyboardet har du følgende knapp:

Knappen for å få tilgang til størrelsesvelgeren

Klikk på den for å avsløre størrelsesvelgeren.

Selgerens størrelser har forskjellige størrelser på

Her kan du velge størrelsen du vil vise grensesnittene til storyboardet. Som standard er størrelsen på iPhone 8 Plus, men du kan endre dette som du ønsker.

Jeg inviterer deg til å spille litt med de forskjellige størrelsene. Det er tre mulige innstillinger:

Størrelsen

Skjermstørrelsen lar deg bare velge skjermstørrelse du vil se.

Det er åtte størrelser for iPhone, men det er bare en størrelse for iPad ! De glemte?

Godt sett ! Med tolv størrelser tilgjengelig i alt, ønsket Apple å unngå å vise for lang liste. Men prøv å klikke på iPad til høyre for listen, den vil bli oppdatert umiddelbart ved å vise tilgjengelige iPads, Magic !

Veiledning

Du kan bestemme deg for å vise landskaps- eller portrettorientering ved å bruke en rotasjon på skjermen:

Knappen for å endre

Tilpasning

Hvis du velger en av iPadene i velgeren, er en tredje innstilling tilgjengelig: tilpasning.

Knappen for å tilpasse

Faktisk på iPad kan to applikasjoner vises ved siden av hverandre. Apple kaller denne delte visningen. Plutselig vil applikasjonen ikke lenger ta hele skjermen, det er derfor nødvendig å gi variasjonen i størrelsen på grensesnittet i dette tilfellet. Og det er med innstillingen Tilpasning som kan visualiseres det.

oppsummert

  • Det er tolv forskjellige skjermstørrelser for iOS -enheter: fire for iPad og åtte for iPhone.
  • Som med forhåndsvisningsmodus, lar størrelsesvelgeren deg i forrige kapittel visualisere hva applikasjonen din gir på forskjellige enheter direkte i storyboard. Og du kan se at så snart vi forlater iPhone 8 Plus, er det ikke veldig overbevisende !

Fra neste spill vil vi begynne å løse dette problemet ! Men før du dykker, sjekk ferdighetene dine i quizen. �� Vi sees !