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

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno

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

Google       Google       20. 9. 2017       7 543×

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

Reklama
Reklama
Obrázek ke článku Jak fungoval internet ve vlaku během Train Hackathonu Kiwi.com?

Jak fungoval internet ve vlaku během Train Hackathonu Kiwi.com?

“Hackathon bez internetu?” posmívala se v komentářích pod pozvánkami na loňský #kiwicomtrainhack IT komunita napříč weby i sociálními sítěmi. Poznámky se zdály oprávněné, internetové připojení v českých vlacích má různou kvalitu a pořádat hackathon, na kterém je kvalitní internetové připojení základním požadavkem na organizátory, se zdálo být troufalé.

Reklama autora

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