Maak een responsieve applicatie met UIKIT voor iOS

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

Mobiel schermformaat en tablet

Grootte en schermresolutie zijn twee essentiële functies om rekening mee te houden bij het kiezen van een smartphone of tablet. Met de onderstaande illustratie kunt u Vergelijk visueel bevel van grootte (Diagonalen in gevestigde en cm) van de meest voorkomende schermformaten van draagbare apparaten.

Vooral voor smartphones zijn schermen van draagbare apparaten over het algemeen steeds meer groot. Deze toename van de omvang heeft zijn voordelen, maar ook zijn nadelen:

• Comfort in gebruik
  Hoe groter het scherm, hoe comfortabeler het is om applicaties te gebruiken, op internet te navigeren of films en series te bekijken. De sleutels op het virtuele toetsenbord zullen ook groter zijn.
• Transportbaarheid en manoeuvreerbaarheid
  Een apparaat met een groot scherm zal omvangrijker en minder handig zijn, vooral voor smartphones waarvoor het vaak nodig is om beide handen te gebruiken om bepaalde delen van het aanraakscherm te bereiken.

Parallel met de grootte, de verhouding Schermen (hoogte/breedte -verhouding) is ook in de loop van de tijd geëvolueerd. Deze ontwikkeling is voornamelijk te wijten aan de democratisering van “grenloze” mobiele telefoons, dat wil zeggen zonder grens- of receptieknoppen.

Het scherm is groter, maar het is ook meer langwerpig (en met afgeronde hoeken). Het formaat nam geleidelijk toe van de klassieker 16/9 tot een gemiddelde van 19.5/9. U zult ook merken dat op veel modellen (met name iPhone) een deel van het display -oppervlak van bovenaan knabbel is door een inkeping (de “inkeping”) die sensoren, de luidspreker en de camera frontaal omvat.

Smartphonegrootte

De onderstaande secties hebben een Paneelvertegenwoordiger van schermgroottes De meest populaire iOS- en Android -modellen (met name Apple iPhone en Samsung Galaxy Ranges).

Schermspecificaties van de hoofdmodellen

In de eenvoud is de bovenste inkeping (Notch) op een identieke manier weergegeven op elke visual, maar het kan anders zijn, afhankelijk van de versies (12, 13, 14, max, pro, meer, enz.)).

Model	Maat (inch)	Grootte (cm)	Definitie (pixels)	Resolutie (PPP)
Iphone 6	4.7 “	11,9 cm	1334 x 750 px	326 PP
iPhone 6s	4.7 “	11,9 cm	1334 x 750 px	326 PP
iPhone 7	4.7 “	11,9 cm	1334 x 750 px	326 PP
iPhone 8	4.7 “	11,9 cm	1334 x 750 px	326 PP
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 PP
iPhone 11	6.1 “	15,5 cm	1792 x 828 PX	326 PP
iPhone XS Max	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 and 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

De aangegeven lengte komt overeen met die van de diagonaal (in inches en cm).

Het diagram en de bovenstaande tabel illustreren duidelijk de trend om mobiele schermgroottes in de loop van de tijd uit te breiden. Voor een meer gedetailleerde vergelijking van de verschillende modellen kunt u ook de iPhone -comparator gebruiken (op de Apple -site).

Met filtercriteria (Baker -site)
Wat is PPP -resolutie ?

het gaat om de pixel dichtheid van het scherm. PPP -eenheid betekent inderdaad Pixel per inch (In het Engels PPI, pixels per inch). Deze waarde geeft dus het aantal pixels aan op een duim van lengte (2.54 cm). Hoe hoger het, hoe preciezer het display zal zijn.

Huidige smartphonesschermen (bijvoorbeeld Apple Retina) hebben een zeer hoge resolutie en pixels zijn over het algemeen niet te onderscheiden.

Zie de pagina Definitie en schermresolutie voor meer informatie.

Schermspecificaties van de hoofdmodellen

Model	Maat (inch)	Grootte (cm)	Definitie (pixels)	Resolutie (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

De aangegeven lengte komt overeen met die van de diagonaal (in inches en cm).

Net als zijn concurrent Apple biedt Samsung een smartphonesvergelijker (Samsung -site.com) om de verschillen tussen hun verschillende modellen te bekijken (schermspecificaties maar ook geheugen, processor, dimensies, enz.)). Helaas vindt u alleen hun meest recente producten.

Met filtercriteria (Baker -site)

Specificaties van de belangrijkste modellen

Model	Maat (inch)	Grootte (cm)	Definitie (pixels)	Resolutie (PPP)
Redmi 9	6.53 “	16,6 cm	2340 x 1080 PX	~ 394 PPP
Redmi (noot) 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

De aangegeven lengte komt overeen met die van de diagonaal (in inches en cm).

Raadpleeg de informatiepagina van hun site, in MI om alle technische specificaties van Xiaomi -smartphones te bekijken (het bereik is relatief breed).com.

Met filtercriteria (Baker -site)

Specificaties van de belangrijkste modellen

Model	Maat (inch)	Grootte (cm)	Definitie (pixels)	Resolutie (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 is	6.78 “	17,2 cm	2388 x 1080 PX	~ 387 PPI
Mate 50 Pro	6.74 “	17,1 cm	2616 x 1212 PX	~ 428 PPI
Mate X3 (ontvouwen)	7.85 “	19,9 cm	2496 x 2224 PX	~ 426 PPP

De aangegeven lengte komt overeen met die van de diagonaal (in inches en cm).

Voor meer informatie over maten en/of technische kenmerken (afmetingen, geheugen, processor, batterij, fotosensoren, enz.) U kunt de Huawei -vergelijkingstool gebruiken (op hun site).

Met filtercriteria (Baker -site)

Tabletformaat

U vindt hieronder de schermformaten van de meest voorkomende tablets op de markt (Apple iPad en Samsung Galaxy Tab). Er kunnen meerdere varianten van deze modellen zijn, maar de kenmerken zijn over het algemeen vergelijkbaar.

Specificaties van de belangrijkste modellen

Model	Maat (inch)	Grootte (cm)	Definitie (pixels)	Resolutie (PPP)
iPad mini (6e generatie.))	8.3 “	21.1 cm	2266 x 1488 PX	326 PP
iPad (9e generatie.))	10.2 “	25,9 cm	2160 x 1620 px	264 PPP
iPad (10e generatie.))	10.9 “	27,7 cm	2360 x 1640 PX	264 PPP
iPad Air (5e generatie.))	10.9 “	27,7 cm	2360 x 1640 PX	264 PPP
iPad Pro 11 “(4e generatie.))	11 “	27,9 cm	2388 x 1668 PX	264 PPP
iPad Pro 12.9 “(6e generatie.))	12.9 “	32,8 cm	2732 x 2048 PX	264 PPP

De aangegeven lengte komt overeen met die van de diagonaal (in inches en cm).

Voor meer informatie over de verschillende iPad -modellen (volledige kenmerken), aarzel niet om de iPad -comparator te gebruiken (op Apple.com). U vindt alle visuals, de variaties op kleur en de volledige technische specificaties.

Met filtercriteria (Baker -site)

Specificaties van de belangrijkste modellen

Model	Maat (inch)	Grootte (cm)	Definitie (pixels)	Resolutie (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

Maak een responsieve applicatie met UIKIT voor iOS

Laten we beginnen met het omgaan met de maten die u moet beheren in iOS kalm benaderen om de kwestie van de screening van schermformaten te benaderen.

De schermgroottes aan het arrangeren

We praten meestal over schermformaten in inch (merkte op ”), en wij Meet de diagonaal.

In iOS zijn er twee grote families van maten:

• iPhone -maten;
• iPad -maten.

In elk gezin zijn er verschillende maten, die in het onderstaande diagram worden gevonden.

Toestel

Maat

iPad Pro Big 1, 2

iPad Pro Small 2

iPad Pro Small 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

Deze tabel vat de twaalf maten Bestaan ​​in de iOS -familie met de uitputtende lijst van alle bijbehorende iOS -apparaten. Niet hoeft u dit allemaal uit het hoofd te weten. Weet alleen dat er zes maten zijn voor de iPhone en zes voor de iPad. En deze twaalf maten, je kunt ze allemaal in het storyboard visualiseren !

Visualiseer de maten in het storyboard

Gebruik de selectie van de maten om de grootte van de interface in het storyboard te wijzigen. Linksonder van het storyboard, je hebt de volgende knop:

Klik erop om de size selector te onthullen.

Hier kunt u de maat selecteren die u wilt weergeven de interfaces van uw storyboard. Standaard is de grootte die van de iPhone 8 Plus, maar u kunt dit wijzigen zoals u wilt.

Ik nodig je uit om een ​​beetje te spelen met de verschillende maten. Er zijn drie mogelijke instellingen:

De grootte

Met de schermgrootte kunt u eenvoudig de schermgrootte kiezen die u wilt bekijken.

Er zijn acht maten voor de iPhone, maar er is maar één maat voor de iPad ! Ze zijn vergeten?

Goed gezien ! Met twaalf maten beschikbaar in totaal, wilde Apple vermijden om te lang te weergeven lijst. Maar probeer op de iPad rechts van de lijst te klikken, deze wordt onmiddellijk bijgewerkt door de beschikbare iPads, Magic weer te geven !

Begeleiding

U kunt besluiten om landschap of portretoriëntatie weer te geven door een rotatie op het display toe te passen:

Aanpassing

Als u een van de iPads in de selector kiest, is een derde instelling beschikbaar: aanpassing.

Inderdaad op de iPad kunnen twee applicaties naast elkaar worden weergegeven. Apple noemt deze gesplitste weergave. Plots zal de toepassing niet langer het hele scherm nemen, het is daarom noodzakelijk om de variatie in de grootte van de interface in dit geval te bieden. En het is met de instelling Aanpassing dat kan het worden gevisualiseerd.

samengevat

• Er zijn twaalf verschillende schermformaten voor iOS -apparaten: vier voor de iPad en acht voor de iPhone.
• Net als bij de voorbeeldmodus, kunt u in het vorige hoofdstuk de size selector visualiseren wat uw applicatie op verschillende apparaten geeft, rechtstreeks in het storyboard. En je kunt zien dat zodra we de iPhone 8 Plus verlaten, het niet erg overtuigend is !

Vanaf de volgende game zullen we dit probleem beginnen op te lossen ! Maar voordat u duikt, controleert u uw vaardigheden in de quiz. �� Tot ziens !