× Aktuálně z oboru

Vychází Game Ready ovladače pro Far Cry 5 [ clanek/2018040603-vychazi-game-ready-ovladace-pro-far-cry-5/ ]
Celá zprávička [ clanek/2018040603-vychazi-game-ready-ovladace-pro-far-cry-5/ ]

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

[ http://programujte.com/profil/1483-lukas-chury/ ]Google [ https://plus.google.com/101446994797551111026?rel=author ]       [ http://programujte.com/profil/118-zdenek-lehocky/ ]Google [ ?rel=author ]       20. 9. 2017       18 125×

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.

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 [ http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/ ].


Článek stažen z webu Programujte.com [ http://programujte.com/clanek/2017092000-jak-odstranit-u-sveho-webu-bile-okraje-na-iphone-x-a-vyuzit-tak-celou-plochu-displeje/ ].