Apple iPhone X网页设计事宜

  1. Designing Websites for iPhone X by WebKit.org
    <!-- iPhone X:启动全屏模式,注意设置相关的CSS规则! -->
    <meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
    /* 放到最后 */
    /* iPhone X内置4个CSS4变量,下面用了两个 */
    @supports(padding: max(0px)) {
      .Specify_Your_Container_Class { 
        padding-left: max(12px, constant(safe-area-inset-left)); 
        padding-right: max(12px, constant(safe-area-inset-right)); 
      } 
    }