苹果刘海屏适配

最新推荐文章于 2022-11-09 23:05:19 发布

vieber

最新推荐文章于 2022-11-09 23:05:19 发布

阅读量238

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/sufubo/article/details/115971955

版权

css 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

博客探讨了如何使用CSS处理刘海屏和非刘海屏设备的适配问题，通过@media查询和@supports规则来调整元素的padding，以确保在不同设备上显示效果的一致性。同时，文章比较了constant(safe-area-inset-top)和env(safe-area-inset-top)的使用情况，讨论了它们的优缺点，并提供了针对不同iPhone型号的具体适配代码示例。

摘要由CSDN通过智能技术生成

https://juejin.cn/post/6844903967625854990

https://juejin.cn/post/6844903974491930637

原有代码检测导致如果新增加机型需要手动增加适配

@media only screen and (device-width: 375px) and (device-height: 812px) {
     .#{$container} {
          padding-top: 22px;
      }
  }

用此代码检测

@supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top))) and (-webkit-overflow-scrolling: touch) {

非刘海屏手机，也会支持，然后设置元素的padding对已有代码侵入性比较大，不能自定义设置增加，需要整体包一层。

这里用env(safe-area-inset-top)，的距离在刘海屏手机会比较大。故而未采用。

故还是采用@media query查询的方式

//iphoneX、iphoneXs
    @media only screen and (device-width: 375px) and (device-height: 812px) {
        .#{$container} {
            padding-top: 22px + $defaultTop;
            // padding-top: 22px;
            // padding-top: constant(safe-area-inset-top);
            // padding-top: env(safe-area-inset-top);
        }
    }

    //iphone Xs Max
    @media only screen and (device-width: 414px) and (device-height: 896px) {
        .#{$container} {
            padding-top: 22px + $defaultTop;
            // padding-top: constant(safe-area-inset-top);
            // padding-top: env(safe-area-inset-top);
        }
    }

    //iphone XR
    @media only screen and (device-width: 414px) and (device-height: 896px) {
        .#{$container} {
            padding-top: 22px + $defaultTop;
            // padding-top: constant(safe-area-inset-top);
            // padding-top: env(safe-area-inset-top);
        }
    }

     // iphone 12
     @media only screen and (device-width: 390px) and (device-height: 844px) {
        .#{$container} {
            padding-top: 22px + $defaultTop;
        }
    }

     // iphone 12max
     @media only screen and (device-width: 428px) and (device-height: 926px) {
        .#{$container} {
            padding-top: 22px + $defaultTop;
        }
    }