Jak odstranit u svého webu bílé okraje na iPhone X a využít tak celou plochu displeje
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

Jak odstranit u svého webu bílé okraje na iPhone X a využít tak celou plochu displejeJak odstranit u svého webu bílé okraje na iPhone X a využít tak celou plochu displeje

 

Jak odstranit u svého webu bílé okraje na iPhone X a využít tak celou plochu displeje

Google       Google       20. 9. 2017       9 048×

Nový iPhone X nabízí nový, bezrámečkový typ displeje, který je narušen jen v horní části malou plochou pro kameru a senzory, díky čemuž se weby zobrazují na novém iPhonu s bílým rámečkem.

Reklama
Reklama

Odstranění bílých okrajů není obtížné a záleží, zdali má web jednobarevné pozadí, nebo obrázek či gradient na pozadí.

V případě jednobarevného pozadí stačí definovat barvu pozadí okrajů jednoduchým background-color ve vlastnostech BODY tagu.

V případě obrázku na pozadí nebo gradientu je třeba přidat do meta-tagu viewport: viewport-fit=cover

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">  

A dále přidat margin nebo padding s konstantami pro iOS11, pokud je viewport-fit=cover použitý:

  • safe-area-inset-top
  • safe-area-inset-right
  • safe-area-inset-left
  • safe-area-inset-bottom
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);  

Více informací najdete na blogu Stephena Radforda.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Tagy:
1 názor  —  1 nový  
Hlasování bylo ukončeno    
2 hlasy
Google
(fotka) Lukáš ChurýLukáš je šéfredaktorem Programujte, vyvíjí webové aplikace, fascinuje ho umělá inteligence a je lektorem na FI MUNI, kde učí navrhovat studenty GUI. Poslední dobou se snaží posunout Laser Game o stupeň výše a vyvíjí pro něj nové herní aplikace a elektroniku.
Web     Twitter     Facebook     LinkedIn    

Nové články

Obrázek ke článku Hackathon Paralelní Polis odkryl nedostatky u projektu eObčanka

Hackathon Paralelní Polis odkryl nedostatky u projektu eObčanka

Paralelní Polis, nezisková organizace postavená na idejích svobody, nezávislosti a inovativního rozvoje společnosti, zorganizovala Hackathon s názvem eObčanka, jehož cílem bylo ověřit bezpečnost státního projektu elektronických průkazů a otevřít jej pro veřejnost. eObčanka je občanský průkaz s kontaktním elektronickým čipem, který umožňuje online prokazování totožnosti a uložení kvalifikovaných a autentizačních certifikátů. 

Reklama
Reklama
Obrázek ke článku Digitální nomád – nonstop na cestách a práce odkudkoliv

Digitální nomád – nonstop na cestách a práce odkudkoliv

Jak skloubit pracovní a osobní život je tématem, které řeší stále více lidí. Mladí více než kdy předtím kladou důraz na svůj osobní čas a nechtějí sedět od brzkého rána do pozdního večera v práci. Stále více lidí hledá způsob, jak si vydělat potřebné peníze a zároveň se bavit a trávit svůj čas smysluplně. 

Reklama autora

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032019 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý