iPhone 7 Plus: Rozměry a Zobrazení Displeje

S příchodem každé nové generace iPhonu se pozornost často soustředí na inovace procesoru, fotoaparátu nebo designu. Avšak pro vývojáře webových stránek a aplikací, stejně jako pro uživatele, kteří si potrpí na dokonalý vizuální zážitek, jsou neméně důležité specifikace displeje. iPhone 7 Plus, uvedený na trh v září 2016, představoval ve své době špičku v technologii mobilních displejů. Jeho velká obrazovka a vysoká hustota pixelů kladly nové nároky na optimalizaci obsahu. V tomto článku se podrobně podíváme na rozměry displeje, jeho rozlišení, koncept viewportu a na to, jak tyto parametry ovlivňují způsob, jakým vidíme digitální svět na tomto zařízení, a jak se na něj připravují vývojáři.

iPhone 7 Plus byl uveden na trh se systémem iOS 10.0.1, s možností aktualizace na iOS 10.3.3, což byla verze operačního systému, která plně využívala jeho hardwarové možnosti, včetně vylepšeného zobrazení barev a jasu.

Fyzické rozměry a obrazovka iPhone 7 Plus

Předtím než se ponoříme do pixelů, je důležité pochopit fyzické parametry samotného zařízení. iPhone 7 Plus je vybaven 5,5palcovým displejem, což mu v době uvedení zajišťovalo pozici jednoho z větších smartphonů na trhu. Tento displej pokrývá přibližně 67,7 % čelní plochy zařízení, což je dobrý poměr s ohledem na rámečky, které byly v té době standardem. Celkové fyzické rozměry zařízení jsou 158,2 x 77,9 x 7,3 mm (nebo 6,23 x 3,07 x 0,29 palce), přičemž pořadí uváděných jednotek je výška x šířka x tloušťka. Tyto rozměry jsou klíčové pro ergonomii držení a pro design příslušenství, jako jsou pouzdra.

Rozlišení obrazovky vs. Viewport: Klíčové rozdíly

Pro mnoho uživatelů jsou pojmy „rozlišení obrazovky“ a „viewport“ zaměnitelné, ale ve skutečnosti představují dvě odlišné, byť související věci, které mají zásadní dopad na zobrazení obsahu, zejména na webu.

Co je to Pixel a Hustota Pixelů (PPI)?

Pixel je nejmenší jednotka nebo element, který tvoří obraz na jakémkoli displeji. Je to malý bod, který může zobrazovat určitou barvu. Celkový počet pixelů, které se vejdou do jednoho palce, se označuje jako „hustota obrazovky“ nebo „hustota pixelů“ a měří se v „Pixelech na palec“ (PPI – Pixels Per Inch). Čím vyšší je PPI, tím ostřejší a detailnější je zobrazení, protože na stejném fyzickém prostoru je více obrazových bodů.

iPhone 7 Plus se pyšní rozlišením 1080 x 1920 pixelů, což znamená, že na šířku má 1080 pixelů a na výšku 1920 pixelů. S fyzickou velikostí 5,5 palce dosahuje hustoty pixelů přibližně 401 PPI. Tato vysoká hustota je jedním z důvodů, proč je obraz na iPhone 7 Plus tak ostrý a text tak čitelný, a proč je považován za „Retina“ displej.

Pochopení Viewportu a CSS Pixel Ratio

Zatímco rozlišení obrazovky udává celkový počet fyzických pixelů, které displej dokáže zobrazit, viewport (často nazývaný též „logické pixely“ nebo „CSS pixely“) se týká skutečného počtu pixelů, které jsou k dispozici pro vykreslení obsahu webové stránky nebo aplikace. Jinými slovy, viewport je oblast, ve které prohlížeč vykresluje obsah.

Hustota pixelů má své limity, pokud jde o zobrazení pixelů na palec v závislosti na různých velikostech obrazovky. Když se počet pixelů na palec zvýší nad limit velikosti obrazovky, rozlišení displeje se sice zvýší, ale skutečná šířka/výška zařízení v pixelech (tzv. Device Independent Pixels nebo CSS Pixel Ratio) zůstává stejná. Toto je klíčové pro responzivní design, kde se webové stránky přizpůsobují velikosti viewportu, nikoli fyzickému rozlišení.

iPhone 7 Plus má viewport o velikosti 414 x 736 pixelů. To znamená, že i když má fyzicky mnohem více pixelů (1080 x 1920), webové stránky a aplikace se vykreslují, jako by byly určeny pro zařízení s rozlišením 414 x 736 pixelů. Důvodem je jeho vysoké „CSS Pixel Ratio“ neboli „Device Pixel Ratio“ (DPR) s hodnotou 3x. To znamená, že na každý CSS pixel připadají 3 fyzické pixely displeje (vertikálně i horizontálně), což vede k velmi ostrému zobrazení. Toto zařízení spadá do kategorie „xxhdpi“ displejů, což je termín používaný pro zařízení s velmi vysokou hustotou pixelů.

Význam Viewportu pro Webový Vývoj a Responzivní Design

Pochopení konceptu viewportu je pro každého webového vývojáře naprosto zásadní. Dnes již nestačí navrhovat webové stránky pouze pro stolní počítače. S obrovským nárůstem mobilního prohlížení internetu je responzivní design – tedy schopnost webové stránky přizpůsobit se jakémukoli zařízení, na kterém je prohlížena – nezbytností. A právě viewport hraje v tomto procesu klíčovou roli.

Když prohlížeč vykresluje webovou stránku, používá viewport k určení „dostupného prostoru“. Pokud by webová stránka byla navržena pouze pro fyzické rozlišení 1080x1920 pixelů, text a obrázky by byly na 5,5palcovém displeji iPhone 7 Plus neuvěřitelně malé a prakticky nečitelné. Díky viewportu (414 x 736 px) prohlížeč „simuluje“ menší logickou obrazovku, na kterou se obsah lépe vejde a je čitelný. Pro vývojáře to znamená, že mohou navrhovat a stylovat svůj obsah s ohledem na tyto logické pixely, což výrazně zjednodušuje proces responzivního přizpůsobení.

Správné nastavení meta tagu viewportu v HTML hlavičce (např. <meta name="viewport" content="width=device-width, initial-scale=1">) je prvním a nejdůležitějším krokem k zajištění, že se webová stránka bude správně zobrazovat na mobilních zařízeních, včetně iPhone 7 Plus. Tímto se prohlížeči řekne, aby šířka stránky odpovídala šířce zařízení (viewportu) a aby se stránka nezvětšovala ani nezmenšovala.

Media Queries pro iPhone 7 Plus: Klíč k responzivnímu designu

Pro pokročilejší responzivní design, kde potřebujeme aplikovat specifické styly pro konkrétní rozměry nebo orientaci zařízení, používáme CSS Media Queries. iPhone 7 Plus je díky svému specifickému viewportu a pixel ratio ideálním kandidátem pro cílené optimalizace. Níže jsou uvedeny nejdůležitější media queries, které můžete použít pro optimalizaci obsahu pro iPhone 7 Plus a podobná zařízení.

Obecné Media Queries pro mobilní zařízení

Tato media query cílí na širší rozsah mobilních zařízení, do kterého iPhone 7 Plus spadá díky své šířce viewportu 414px.

@media only screen and (min-width: 414px) and (max-width: 767px) { /* Vaše styly zde pro telefony a menší tablety */ }

Tato pravidla se aplikují na obrazovky s minimální šířkou 414 pixelů a maximální šířkou 767 pixelů. Je to užitečné pro definování stylů, které se mají použít na většině chytrých telefonů a menších tabletů v režimu na výšku.

Media Queries podle minimální šířky a výšky

Pro ještě specifičtější cílení můžete použít media queries, které se aktivují při dosažení minimální šířky nebo výšky viewportu iPhone 7 Plus.

@media only screen and (min-width: 414px) { /* Styly pro zařízení s viewportem širokým alespoň 414px */ }

Tato pravidla se použijí, když je šířka viewportu alespoň 414 pixelů. To je užitečné pro přizpůsobení rozložení, které se má začít měnit, jakmile se dostaneme z nejmenších mobilních zařízení.

@media only screen and (min-height: 736px) { /* Styly pro zařízení s viewportem vysokým alespoň 736px */ }

Tato pravidla se aktivují, když je výška viewportu alespoň 736 pixelů. Ideální pro optimalizaci obsahu, který vyžaduje určitou vertikální prostor, nebo pro úpravy rozložení pro telefony v režimu na výšku.

Orientace displeje: Na šířku a na výšku

iPhone 7 Plus, stejně jako většina smartphonů, umožňuje změnu orientace displeje z portrétu (na výšku) na krajinu (na šířku). Pro tyto případy existují specifické media queries:

@media only screen and (min-width: 736px) and (orientation: landscape) { /* Styly pro iPhone 7 Plus v režimu na šířku */ }

V režimu na šířku se šířka viewportu iPhone 7 Plus stane 736 pixelů a výška 414 pixelů. Tato media query cílí specificky na tento režim, což je ideální pro optimalizaci pro širší zobrazení, například pro galerii obrázků nebo širší textové bloky.

@media only screen and (min-width: 414px) and (orientation: portrait) { /* Styly pro iPhone 7 Plus v režimu na výšku */ }

V režimu na výšku je šířka viewportu 414 pixelů. Tato media query je určena pro optimalizaci typického vertikálního rozložení, které je běžné pro většinu mobilních webů.

Media Queries specifické pro šířku zařízení (Device Width)

Ačkoliv se pro responzivní design obvykle doporučuje používat `min-width` a `max-width` (které se vztahují k viewportu), existují i media queries založené na fyzické šířce zařízení (`device-width`). Tyto jsou méně flexibilní, ale mohou být užitečné pro velmi specifické případy, nebo pro zpětnou kompatibilitu s některými staršími prohlížeči.

@media only screen and (min-device-width: 414px) and (orientation: portrait) { /* Styly pro iPhone 7 Plus v režimu na výšku, založené na šířce zařízení */ }

@media only screen and (min-device-width: 736px) and (orientation: landscape) { /* Styly pro iPhone 7 Plus v režimu na šířku, založené na šířce zařízení */ }

Tyto media queries cílí na skutečnou šířku zařízení v logických pixelech. Většinou se překrývají s běžnými `min-width` media queries pro iPhone 7 Plus, ale je dobré o nich vědět.

Retina Displeje a optimalizace pro vysoké rozlišení

Termín Retina je marketingové označení společnosti Apple pro displeje s vysokou hustotou pixelů, kde lidské oko není schopno rozlišit jednotlivé pixely z normální pozorovací vzdálenosti. iPhone 7 Plus s jeho 3x CSS Pixel Ratio je typickým příkladem Retina displeje.

Optimalizace pro Retina displeje znamená poskytování obrázků a grafiky ve vyšším rozlišení, aby vypadaly ostře a nezrnitě. Místo jednoho pixelu na obrázku je na Retina displeji použito více fyzických pixelů k vykreslení tohoto jednoho logického pixelu, což zajišťuje nesrovnatelně detailnější a čistší obraz.

Retina 3x specifické Media Queries pro iPhone 7 Plus

Pro cílení na iPhone 7 Plus, který má pixel ratio 3x, můžete použít následující media query:

@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and ( min--moz-device-pixel-ratio: 3), only screen and ( -o-min-device-pixel-ratio: 3/1), only screen and ( min-device-pixel-ratio: 3), only screen and ( min-resolution: 401dpi), only screen and ( min-resolution: 3dppx) { /* Styly pro Retina 3x displeje (např. obrázky ve 3x rozlišení) */ }

Tato komplexní media query zajišťuje kompatibilitu napříč různými prohlížeči a jejich implementacemi pro zjišťování hustoty pixelů. Její použití umožňuje poskytovat obrázky s trojnásobným rozlišením (např. obrázek 300x300px by měl být fyzicky 900x900px), což vede k dokonale ostrému zobrazení na iPhone 7 Plus.

Obecné Retina Media Queries (2x a 3x)

Většina moderních zařízení má Retina displeje s pixel ratio 2x nebo 3x. Pro zjednodušení a širší kompatibilitu je často efektivnější používat obecné Retina media queries, které cílí na oba typy:

@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) { /* Styly pro Retina 2x displeje */ }

@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and ( min--moz-device-pixel-ratio: 3), only screen and ( -o-min-device-pixel-ratio: 3/1), only screen and ( min-device-pixel-ratio: 3), only screen and ( min-resolution: 384dpi), only screen and ( min-resolution: 3dppx) { /* Styly pro Retina 3x displeje */ }

Použitím těchto obecných pravidel můžete zajistit, že váš obsah s vysokým rozlišením bude správně zobrazen na široké škále zařízení s Retina displeji, aniž byste museli psát specifická pravidla pro každý model telefonu.

Často kladené otázky (FAQ)

Jaký je rozdíl mezi rozlišením a viewportem u iPhone 7 Plus?

Rozlišení (1080 x 1920 PX) udává celkový počet fyzických pixelů na displeji, zatímco viewport (414 x 736 PX) je logická velikost, kterou prohlížeče používají pro vykreslení webového obsahu. Díky CSS Pixel Ratio 3x se na každý logický pixel vykreslí 3 fyzické pixely, což zajišťuje vysokou ostrost obrazu.

Proč je důležité znát viewport pro vývoj webu?

Znalost viewportu je klíčová pro responzivní design. Umožňuje vývojářům navrhovat webové stránky tak, aby se správně přizpůsobily velikosti a orientaci obrazovky iPhone 7 Plus (a dalších zařízení), zajistily optimální čitelnost a interakci bez nutnosti horizontálního posouvání nebo příliš malého textu.

Co znamená "3x Retina" u iPhone 7 Plus?

„3x Retina“ znamená, že iPhone 7 Plus má CSS Pixel Ratio 3. To indikuje, že pro každý jeden logický pixel (který používá webový design) se na fyzickém displeji vykreslí pole 3x3, tedy 9 fyzických pixelů. Výsledkem je extrémně ostrý a detailní obraz, kde jednotlivé pixely nejsou pouhým okem rozpoznatelné.

Jaké operační systémy iPhone 7 Plus podporuje?

iPhone 7 Plus byl uveden na trh s iOS 10.0.1 a bylo možné jej aktualizovat až na iOS 10.3.3. To znamená, že vývojáři by měli testovat kompatibilitu svých aplikací a webových stránek s těmito verzemi iOS, aby zajistili bezproblémový uživatelský zážitek.

Pochopení specifik displeje iPhone 7 Plus, zejména rozdílu mezi fyzickým rozlišením a logickým viewportem, je pro každého, kdo se zabývá digitálním obsahem, nezbytné. Ať už jste vývojář, který optimalizuje web pro mobilní zařízení, nebo jen zvědavý uživatel, který chce pochopit, proč je obraz na jeho telefonu tak ostrý, znalost těchto parametrů vám pomůže lépe se orientovat ve světě moderních technologií. iPhone 7 Plus je skvělým příkladem, jak se technologie displejů vyvíjí a jak ovlivňuje náš každodenní digitální život.

Chceš-li si přečíst další články podobné jako iPhone 7 Plus: Rozměry a Zobrazení Displeje, navštiv kategorii iPhone.