iPhoneX safe area playground

In this example below you will see how to do a iPhoneX safe area playground with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ɐɥɔsɐS ɥɔɐ⌉, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ɐɥɔsɐS ɥɔɐ⌉ ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>iPhoneX safe area playground</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

<body>
  <header>
    <ul class="container">
      <li><a href="https://webkit.org/blog/7929/designing-websites-for-iphone-x/"> Webkit Blogpost </a></li>
      <li><a href="https://webkit.org/demos/safe-area-insets/safe-areas.html"> Safe Area Demo </a></li>
    </ul>
  </header>
  <div class="content container">
    <p>Out of the box, Safari displays your existing websites beautifully on the edge-to-edge display of the new iPhone X. Content is automatically inset within the display’s safe area so it is not obscured by the rounded corners, or the device’s sensor
      housing. The inset area is filled with the page’s background-color (as specified on the body or html elements) to blend in with the rest of the page. For many websites, this is enough. If your page has only text and images above a solid background
      color, the default insets will look great.</p>
    <p>
      The first new feature is an extension to the existing viewport meta tag called viewport-fit, which provides control over the insetting behavior. viewport-fit is available in iOS 11. The default value of viewport-fit is auto, which results in the automatic
      insetting behavior seen above. In order to disable that behavior and cause the page to lay out to the full size of the screen, you can set viewport-fit to cover. After doing so, our viewport meta tag now looks like this:

      <pre><code>
    &lt;meta name='viewport' content='initial-scale=1, viewport-fit=cover'&gt</code>
    </pre>

    </p>
    <p>
      The next step towards making our page usable again after adopting viewport-fit=cover is to selectively apply padding to elements that contain important content, in order to ensure that they are not obscured by the shape of the screen. This will result
      in a page that takes full advantage of the increased screen real estate on iPhone X while adjusting dynamically to avoid the corners, sensor housing, and indicator for accessing the Home screen.</p>
    <p>To achieve this, WebKit in iOS 11 includes a new CSS function, constant(), and a set of four pre-defined constants: <pre><code>
  safe-area-inset-left
  safe-area-inset-right
  safe-area-inset-top
  safe-area-inset-bottom</code></pre> When combined, these allow style declarations to reference the current size of the safe area insets on each side. For browsers that do not support constant(), the style rule that includes it will be ignored; for this
      reason, it is important to continue to separately specify fallback rules for any declarations using constant().</p>

    <small>above text from <a href="https://webkit.org/blog/7929/designing-websites-for-iphone-x/">https://webkit.org/blog/7929/designing-websites-for-iphone-x/</a></small>
  </div>

<footer>
  <ul>
    <li><a href="https://developer.apple.com/documentation/uikit/uiview/positioning_content_relative_to_the_safe_area"> UIKit Infos</a></li>
    <li><a href="https://github.com/w3c/csswg-drafts/pull/1819"> Safe Area Draft</a></li>
  </ul>
</footer>
</body>

</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/voodoocode/iphonex-safe-area-playground-XeVdKG */
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html {
  background: rebeccapurple;
  font: 16px system-ui;
}

header,
footer {
  background: white;
  position: fixed;
  left: 0;
  width: 100%;
}
header ul,
footer ul {
  padding: 0;
  display: flex;
  list-style: none;
}
header li a,
footer li a {
  padding: 1rem;
}

header {
  top: 0;
}
header ul {
  justify-content: flex-end;
}

footer {
  bottom: 0;
}
footer ul {
  justify-content: center;
  padding-bottom: constant(safe-area-inset-bottom);
}

.container {
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
}

.content {
  margin-top: 50px;
  margin-bottom: 50px;
  margin-bottom: calc(50px + constant(safe-area-inset-bottom));
  /* footer height + safe area */
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: #b9f;
  color: white;
}

Comments