关于 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
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 屏幕适配异形屏适配 ① ( 异形屏类型:刘海屏水滴屏挖孔屏 | 沉浸式布局刘海屏适配 | 华为手机异形屏适配注意点 )