| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta name="viewport" content="initial-scale=1, viewport-fit=cover"> |
| <title>Designing Websites for iPhone X: Respecting the safe areas</title> |
| <link rel="stylesheet" type="text/css" href="style.css"> |
| <style> |
| #topBar { |
| background-color: #729fcf; |
| padding: constant(safe-area-inset-top) constant(safe-area-inset-right) 0 constant(safe-area-inset-left); |
| padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); |
| } |
| |
| #topBar a { |
| display: inline-block; |
| |
| height: 100%; |
| padding: 12px; |
| |
| border-right: 3px solid rgba(255, 255, 255, 0.5); |
| |
| color: white; |
| text-decoration: none; |
| font-weight: bold; |
| font-size: 18pt; |
| } |
| |
| #topBar a:last-child { |
| border-right: none; |
| } |
| |
| #bottomBar { |
| position: fixed; |
| |
| left: 0; |
| right: 0; |
| bottom: 0; |
| |
| background-color: #3465a4; |
| |
| text-align: center; |
| |
| padding: 8px; |
| padding-left: constant(safe-area-inset-left); |
| padding-left: env(safe-area-inset-left); |
| padding-right: constant(safe-area-inset-right); |
| padding-right: env(safe-area-inset-right); |
| padding-bottom: constant(safe-area-inset-bottom); |
| padding-bottom: env(safe-area-inset-bottom); |
| } |
| |
| #bottomBar a { |
| padding: 0 24px; |
| |
| color: white; |
| font-size: 12pt; |
| text-decoration: none; |
| } |
| |
| h1 { |
| margin: 12px 0 0 0; |
| } |
| |
| h2 { |
| color: #aaa; |
| font-size: 12pt; |
| text-align: left; |
| |
| margin: 0; |
| } |
| |
| .post { |
| width: 100%; |
| |
| margin-bottom: 50px; |
| |
| padding: 12px; |
| padding-left: constant(safe-area-inset-left); |
| padding-left: env(safe-area-inset-left); |
| padding-right: constant(safe-area-inset-right); |
| padding-right: env(safe-area-inset-right); |
| } |
| |
| .post p:first-child { |
| margin: 0; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="topBar"><a href="#">Blog</a><a href="#">Photos</a><a href="#">Projects</a></div> |
| <div class="post"> |
| <h1>Welcome</h1> |
| <h2>two hours ago</h2> |
| <p>Hi!</p> |
| <p>Welcome to my sample blog!</p> |
| <p>This post is here to help demonstrate how easy it is to take an existing site, along with full-width bars and fixed-position elements, and make it take full advantage of iPhone X's edge-to-edge display.</p> |
| <p>The actual post describing how to adopt the new API is over on the <a href="https://webkit.org/blog/7929/designing-websites-for-iphone-x/">WebKit blog</a>.</p> |
| <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>env()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p> |
| <p>I hope that it helps you adopt these new features in your websites.</p> |
| </div> |
| <div id="bottomBar"><a href="#">About Me</a><a href="#">Contact</a><a href="#">Site Map</a></div> |
| </body> |
| </html> |
