Created
May 21, 2018 22:09
-
-
Save valnub/aebdb788895f8c581d9971b6aed994af to your computer and use it in GitHub Desktop.
iPhone X notch optimization HTML, CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype> | |
| <html> | |
| <head> | |
| <title>Notch test</title> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> | |
| <style> | |
| * {margin: 0;padding: 0;} | |
| p {margin-bottom: 16px;} | |
| body {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight: 400;font-size: 16px;} | |
| header { | |
| font-size: 16px; | |
| text-align: center; | |
| height: 50px; | |
| background-color: rgb(61, 110, 216); | |
| color: #fff; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding-top: env(safe-area-inset-top); | |
| } | |
| #main { | |
| padding-top: 16px; | |
| padding-left: max(16px, env(safe-area-inset-left)); | |
| padding-right: max(16px, env(safe-area-inset-right)); | |
| padding-bottom: env(safe-area-inset-bottom); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header>Welcome</header> | |
| <div id="main"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et fermentum magna. Duis pulvinar eros feugiat enim fermentum egestas eget et lorem. Duis hendrerit, est at vehicula rhoncus, nisi odio ullamcorper dui, sed ornare sapien nibh a risus. Praesent hendrerit at turpis et convallis. Curabitur congue pellentesque urna eu ultrices. Donec blandit arcu sed massa finibus vehicula. Suspendisse potenti. Vivamus ut lobortis ligula. Phasellus eget pulvinar nisl. Ut at cursus velit. Sed imperdiet molestie erat, eget pellentesque neque gravida quis. Donec justo tortor, consectetur nec accumsan ut, convallis ut felis. Donec convallis mauris libero, maximus fringilla tellus elementum eget. In sit amet turpis sit amet orci lobortis efficitur.</p> | |
| <p>Proin suscipit metus mattis odio feugiat molestie. Aliquam non nulla sit amet ante consequat facilisis eget id neque. Donec risus massa, bibendum ut pulvinar vel, sagittis ut lacus. Pellentesque eu nisl vel turpis condimentum elementum. Suspendisse laoreet tellus quis semper iaculis. Aenean elementum rutrum maximus. Praesent egestas mollis vulputate. Aliquam cursus risus dictum erat porta, sed mattis tortor semper. Vivamus enim sem, imperdiet vitae aliquet non, faucibus non purus. Donec eu velit turpis. Sed ultricies arcu lorem, a semper nunc fringilla eu. Donec quam eros, rutrum ac odio non, eleifend pretium erat. Nunc malesuada, lorem gravida blandit pharetra, lacus lectus porta massa, vel facilisis nulla tellus a est.</p> | |
| <p>Cras eget enim tortor. Curabitur rhoncus varius nisi in fringilla. Cras molestie tellus sem, feugiat sodales ante facilisis ac. Sed lacinia efficitur nunc, in rhoncus quam dignissim nec. Curabitur finibus sodales venenatis. Fusce at risus at libero imperdiet convallis. Morbi ut mauris dapibus, luctus tellus id, dictum risus. Cras dignissim nunc nec urna ultrices posuere. Morbi eget ligula diam. Quisque egestas sollicitudin tortor, at placerat neque posuere ac. Integer vehicula neque et mauris venenatis, at tincidunt mi porta. Nulla facilisi.</p> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment