Vytvořte responzivní aplikaci s UIKIT pro iOS

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

Velikost a tablet mobilní obrazovky

Rozlišení velikosti a obrazovky jsou při výběru smartphonu nebo tabletu dva základní funkce, které je třeba vzít v úvahu. Níže uvedený obrázek umožňuje Vizuálně porovnat objednávky velikosti (Úhlopříčky v úřadujícím a cm) nejběžnějších velikostí obrazovky přenosných zařízení.

Zejména pro chytré telefony jsou obrazovky přenosných zařízení obecně větší a větší. Toto zvětšení velikosti má své výhody, ale také nevýhody:

• Pohodlí v používání
  Čím větší je obrazovka, tím pohodlnější bude používat aplikace, navigovat na webu nebo sledovat filmy a série. Klíče na virtuální klávesnici budou také větší.
• Přepravitelnost a manévrovatelnost
  Zařízení s velkou obrazovkou bude objemnější a méně užitečné, zejména pro chytré telefony, pro které bude často nutné používat obě ruce k dosažení určitých částí dotykové obrazovky.

Souběžně s velikostí, poměr Obrazovky (poměr výšky/šířky) se také v průběhu času vyvíjely. Tento vývoj je způsoben hlavně demokratizací mobilních telefonů „bez hranic“, tj. Bez tlačítek hranic nebo recepce.

Obrazovka je větší, ale je také prodloužená (a se zaoblenými rohy). Formát se postupně zvýšil z klasického 16/9 na průměrně 19.5/9. Také si všimnete, že na mnoha modelech (zejména iPhone) je část povrchu displeje od okusování nahoře o zářez („Notch“), který zahrnuje senzory, reproduktor a frontu fotoaparátu.

Velikost smartphonu

Níže uvedené sekce mají a Zástupce panelu velikosti obrazovky Nejoblíbenější modely iOS a Android (Apple iPhone a Samsung Galaxy řady).

Specifikace obrazovky hlavních modelů

Jednoduchost, horní zářez (Notch) byl reprezentován stejným způsobem na každém vizuálu, ale může to být odlišné v závislosti na verzích (12, 13, 14, max, pro, více atd.).

Modelka	Velikost (palec)	Velikost (cm)	Definice (pixely)	Rozlišení (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 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 a 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

Uvedená délka odpovídá délce diagonálu (v palcích a cm).

Schéma a tabulka výše jasně ilustrují trend pro rozšíření velikosti mobilní obrazovky v průběhu času. Kromě toho můžete pro podrobnější srovnání různých modelů také použít komparátor iPhone (na webu Apple).

S filtračními kritérii (Baker Site)
Co je rozlišení PPP ?

jde o hustota pixelů obrazovky. Jednotka PPP skutečně znamená Pixel na palec (V angličtině PPI, pixely na palec). Tato hodnota tedy ukazuje počet pixelů na délce (2.54 cm). Čím vyšší je, tím přesnější bude displej.

Aktuální obrazovky smartphonů (například sítnice Apple) mají velmi vysoké rozlišení a pixely jsou obecně nerozeznatelné.

Další informace naleznete na stránce definice a rozlišení obrazovky.

Specifikace obrazovky hlavních modelů

Modelka	Velikost (palec)	Velikost (cm)	Definice (pixely)	Rozlišení (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

Uvedená délka odpovídá délce diagonálu (v palcích a cm).

Stejně jako jeho konkurent Apple poskytuje Samsung komparátor smartphonů (stránka Samsung.com) zobrazit rozdíly mezi jejich různými modely (specifikace obrazovky, ale také paměť, procesor, rozměry atd.). Bohužel najdete pouze jejich nejnovější produkty.

S filtračními kritérii (Baker Site)

Specifikace hlavních modelů

Modelka	Velikost (palec)	Velikost (cm)	Definice (pixely)	Rozlišení (PPP)
Redmi 9	6,53 “	16,6 cm	2340 x 1080 px	~ 394 ppp
Redmi (poznámka) 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

Uvedená délka odpovídá délce diagonálu (v palcích a cm).

Chcete -li zobrazit všechny technické specifikace chytrých telefonů Xiaomi (rozsah je relativně široký), obraťte se na informační stránku jejich webu v MI.com.

S filtračními kritérii (Baker Site)

Specifikace hlavních modelů

Modelka	Velikost (palec)	Velikost (cm)	Definice (pixely)	Rozlišení (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 je	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 (rozvinuté)	7,85 “	19,9 cm	2496 x 2224 PX	~ 426 ppp

Uvedená délka odpovídá délce diagonálu (v palcích a cm).

Chcete -li se dozvědět více o velikostech a/nebo technických vlastnostech (rozměry, paměť, procesor, baterie, senzory fotografií atd.), můžete použít porovnávací nástroj Huawei (na jejich webu).

S filtračními kritérii (Baker Site)

Velikost tabletu

Níže najdete velikost obrazovky nejběžnějších tablet na trhu (Apple iPad a Samsung Galaxy Tab). Může existovat více variant těchto modelů, ale vlastnosti jsou obecně podobné.

Specifikace hlavních modelů

Modelka	Velikost (palec)	Velikost (cm)	Definice (pixely)	Rozlišení (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

Uvedená délka odpovídá délce diagonálu (v palcích a cm).

Pro více informací o různých modelech iPadu (kompletní vlastnosti) neváhejte použít komparátor iPad (na Apple.com). Najdete všechny vizuály, variace podle barvy a úplné technické specifikace.

S filtračními kritérii (Baker Site)

Specifikace hlavních modelů

Modelka	Velikost (palec)	Velikost (cm)	Definice (pixely)	Rozlišení (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

Vytvořte responzivní aplikaci s UIKIT pro iOS

Abychom klidně přistoupili k otázce screeningu velikostí obrazovky, začněme tím, že se budete muset spravovat v iOS.

Zatknout velikosti obrazovky

Obvykle mluvíme o velikosti obrazovky palec (poznamenáno ”) a my Změřte diagonálu.

V iOS jsou dvě velké rodiny velikostí:

• Velikosti iPhone;
• Velikost iPadu.

V každé rodině existuje několik různých velikostí, které se nacházejí v níže uvedeném diagramu.

přístroj

Velikost

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

Tato tabulka shrnuje Dvanáct velikostí existující v rodině iOS s vyčerpávajícím seznamem všech přidružených zařízení iOS. Není třeba to všechno znát srdcem. Pouze vědí, že pro iPhone je šest velikostí a šest pro iPad. A těchto dvanáct velikostí je můžete vizualizovat všechny na storyboardu !

Vizualizujte velikosti na storyboardu

Chcete -li změnit velikost rozhraní v scénáři, použijte volič velikosti. Vlevo dole od storyboardu máte následující tlačítko:

Kliknutím na něj odhalíte volič velikosti.

Zde si můžete vybrat velikost, kterou chcete zobrazit rozhraní svého storyboardu. Ve výchozím nastavení je velikost iPhone 8 Plus, ale můžete to změnit, jak si přejete.

Zvu vás, abyste trochu hráli s různými velikostmi. Existují tři možná nastavení:

Velikost

Velikost obrazovky umožňuje jednoduše zvolit velikost obrazovky, kterou chcete zobrazit.

Pro iPhone je osm velikostí, ale pro iPad existuje pouze jedna velikost ! Zapomněli?

Dobře vidět ! S dostupnými dvanácti velikostmi se Apple chtěl vyhnout zobrazení příliš dlouhého seznamu. Zkuste však kliknout na iPad napravo od seznamu, bude okamžitě aktualizován zobrazením dostupných iPadů, magie !

Vedení

Můžete se rozhodnout zobrazit orientaci na krajinu nebo portrét použitím rotace na displej:

Přizpůsobování

Pokud si vyberete jeden z iPadů ve voliči, je k dispozici třetí nastavení: adaptace.

Ve skutečnosti na iPadu lze vedle sebe zobrazit dvě aplikace. Apple nazývá tento rozdělený pohled. Najednou aplikace již nebude pořádat celou obrazovku, je proto nutné poskytnout v tomto případě změnu velikosti rozhraní. A je to s nastavením Přizpůsobování to lze vizualizovat.

celkem

• Pro zařízení iOS existuje dvanáct různých velikostí obrazovky: čtyři pro iPad a osm pro iPhone.
• Stejně jako v režimu náhledu, v předchozí kapitole umožňuje výběr velikosti vizualizovat to, co vaše aplikace dává na různých zařízeních přímo v Storyboardu. A můžete to vidět, jakmile opustíme iPhone 8 Plus, není to příliš přesvědčivé !

Z další hry začneme tento problém řešit ! Ale před potápěním zkontrolujte své dovednosti v kvízu. �� Uvidíme se !