Websites/webkit.org/demos/safe-area-insets/4-min-max.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <meta name="viewport" content="initial-scale=1, viewport-fit=cover">
   5     <title>Designing Websites for iPhone X: min() and max()</title>
   6     <link rel="stylesheet" type="text/css" href="style.css">
   7     <style>
   8     #topBar {
   9         background-color: #729fcf;
  10         padding: constant(safe-area-inset-top) constant(safe-area-inset-right) 0 constant(safe-area-inset-left);
  11     }
  12
  13     #topBar a {
  14         display: inline-block;
  15
  16         height: 100%;
  17         padding: 12px;
  18
  19         border-right: 3px solid rgba(255, 255, 255, 0.5);
  20
  21         color: white;
  22         text-decoration: none;
  23         font-weight: bold;
  24         font-size: 18pt;
  25     }
  26
  27     #topBar a:last-child {
  28         border-right: none;
  29     }
  30
  31     #bottomBar {
  32         position: fixed;
  33
  34         left: 0;
  35         right: 0;
  36         bottom: 0;
  37
  38         background-color: #3465a4;
  39
  40         text-align: center;
  41
  42         padding: 8px;
  43     }
  44
  45     #bottomBar a {
  46         padding: 0 24px;
  47
  48         color: white;
  49         font-size: 12pt;
  50         text-decoration: none;
  51     }
  52
  53     h1 {
  54         margin: 12px 0 0 0;
  55     }
  56
  57     h2 {
  58         color: #aaa;
  59         font-size: 12pt;
  60         text-align: left;
  61
  62         margin: 0;
  63     }
  64
  65     .post {
  66         width: 100%;
  67
  68         margin-bottom: 50px;
  69
  70         padding: 12px;
  71     }
  72
  73     .post p:first-child {
  74         margin: 0;
  75     }
  76
  77     @supports(padding: max(0px)) {
  78         #bottomBar {
  79             padding-left: max(8px, constant(safe-area-inset-left));
  80             padding-right: max(8px, constant(safe-area-inset-right));
  81             padding-bottom: max(8px, constant(safe-area-inset-bottom));
  82         }
  83
  84         .post {
  85             padding-left: max(12px, constant(safe-area-inset-left));
  86             padding-right: max(12px, constant(safe-area-inset-right));
  87         }
  88     }
  89     </style>
  90 </head>
  91 <body>
  92     <div id="topBar"><a href="#">Blog</a><a href="#">Photos</a><a href="#">Projects</a></div>
  93     <div class="post">
  94     <h1>Welcome</h1>
  95     <h2>two hours ago</h2>
  96     <p>Hi!</p>
  97     <p>Welcome to my sample blog!</p>
  98     <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>
  99     <p>The actual post describing how to adopt the new API is over on the <a href="#">WebKit blog</a>.</p>
 100     <p>There, you will learn all about new WebKit features, including <code>viewport-fit</code>, <code>constant()</code>, safe area insets, and <code>min()</code> and <code>max()</code>.</p>
 101     <p>I hope that it helps you adopt these new features in your websites.</p>
 102     </div>
 103     <div id="bottomBar"><a href="#">About Me</a><a href="#">Contact</a><a href="#">Site Map</a></div>
 104 </body>
 105 </html>