关于 iphone刘海屏适配

Posted nightfallsad

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于 iphone刘海屏适配相关的知识,希望对你有一定的参考价值。

默认刘海屏的webview是有安全区域的,加上viewport-fit=cover属性后webview会全屏,全屏后为了适配刘海屏加上安全区域

padding-top: 1rem;//android样式
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);// ios 样式
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left); // ios样式

ios两个样式原因
when the iPhone X first came out, it used constant() instead of env(), but as of 11.2, constant() has been removed in favor of the standardized env()

以上是关于关于 iphone刘海屏适配的主要内容,如果未能解决你的问题,请参考以下文章

简洁明了的刘海屏适配方案

Android 刘海屏适配

Android刘海屏适配

APP适配安卓手机刘海屏

Android 屏幕适配异形屏适配 ① ( 异形屏类型:刘海屏水滴屏挖孔屏 | 沉浸式布局刘海屏适配 | 华为手机异形屏适配注意点 )

Android 屏幕适配异形屏适配 ① ( 异形屏类型:刘海屏水滴屏挖孔屏 | 沉浸式布局刘海屏适配 | 华为手机异形屏适配注意点 )