iPhone X 适配解决方案

在head里添加<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

填充一个背景色

这将导致一个页面允分利用iPhone X上增加的区域，同时动态调整以避免圆角、传感器外壳和访问主屏幕的指示器。

iOS 11中的WebKit包含了一个新的CSS函数constant()，safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom

padding: 12px; 
padding-left: constant(safe-area-inset-left); 
padding-right: constant(safe-area-inset-right);

要单独写，避免不支持constant函数的浏览器忽略他们的属性

@supports(padding: max(0px)) {//检测是否支持max属性
        #bottomBar {
            padding-left: max(8px, constant(safe-area-inset-left));//判断两个值哪一个大，取大的，这样翻转的情况不至于紧贴屏幕
            padding-right: max(8px, constant(safe-area-inset-right));
            padding-bottom: max(8px, constant(safe-area-inset-bottom));
        }

        .post {
            padding-left: max(12px, constant(safe-area-inset-left));
            padding-right: max(12px, constant(safe-area-inset-right));
        }
    }

要测试的话可以用

参考链接：http://www.w3cplus.com/css/the-notch-and-css.html