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.