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

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       20. 9. 2017       1 430×

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ý  
Hustodémonsky krutopřísné    
1 hlas
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 Seznamte se s open source platformou NopCommerce – 1. díl

Seznamte se s open source platformou NopCommerce – 1. díl

Hledáte e-commerce řešení, které si dokážete přizpůsobit podle vašich požadavků? Chcete čistý a srozumitelný kód, se kterým bude radost pracovat? Prozkoumejte s námi možnosti open source projektu NopCommerce. Seriál programování pod NopCommerce Vám pomůže překonat první kroky nejistoty a úspěšně zvládnout vývoj pod platformou NopCommerce.

Reklama
Reklama
Obrázek ke článku Facebook spouští službu Marketplace V ČR

Facebook spouští službu Marketplace V ČR

Společná platforma Marketplace usnadní lidem na Facebooku vyhledávání, nákup a prodej použitého zboží na lokální úrovni. Bude tak přímou konkurencí pro weby a aplikace se stejným zaměřením jako je například Letgo, Bazoš, Aukro, Sbazar a další.

Reklama autora

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