CSS 适配刘海屏 CSS适配iOS屏幕 ios可视窗口

由于苹果手机上面刘海会遮挡住一些内容，所以我们在开发的时候需要进行一些适配

//使用padding-top的让内容往下挤，适配刘海屏

padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);

safe-area-inset-top 安全区域距离顶部边界
safe-area-inset-bottom 安全区域距离底部边界
safe-area-inset-left 安全区域距离左边边界
safe-area-inset-right 安全区域距离右边边界

设置网页可视窗口

 <meta name="viewport" content="viewport-fit=cover">

使用viewport-fit属性，可以使内容完全覆盖整个屏幕。

CSS 适配刘海屏 CSS适配iOS屏幕 ios可视窗口相关推荐

Android 刘海屏的适配
1.Android8.0以上的适配说明主要说明国内外几大主流产商:小米.oppo.vivo.华为.三星.Google. 小米 MIUI Notch 屏适配说明 Notch 机型在界面上会带来两个问题 ...
iOS灵活适配刘海屏手机的顶部状态栏高度和底部安全距离
我们知道在刘海屏手机出来之前,iOS App的顶部状态栏高度为20pt,导航栏的可布局区域高度为44pt,整个导航栏高度为64pt,底部安全距离为0. 在刘海屏手机出来后,刘海屏机型iOS App的顶 ...
1.屏幕分类和刘海屏的适配原则
1.屏幕分类和刘海屏的适配原则_哔哩哔哩_bilibili 百分百布局不在维护淘汰了头条怎么做的阿里怎么做的? 将近几千种 rom6 7种,之前适配宽和高曲面屏分屏异形屏 andro ...
iOS 适配刘海屏刘海状态栏底部安全距离
刘海屏出来前状态栏:20pt 导航栏:44pt 底部安全距离:0pt tabBar: 49 刘海屏出来后状态栏:44pt 导航栏:44pt 底部安全距离:34pt tabBar: 49 代码 // ...
iPhoneX（刘海屏）适配
iPhoneX(刘海屏)适配在 iOS11的时候,苹果破天荒发布了一款新屏幕样式的手机,俗称刘海屏.世人皆道丑,而后纷纷买之.自此,iOS 开发者们也走向了 iPhoneX系列的适配之旅. 区别状 ...
《转》安卓P 刘海屏的适配
安卓P版本也就是刚发布的安卓9.0 其中就加入了刘海屏相关的API.其相关行为与功能变更也是非常多的,从其变更的趋势及功能来看,google在进一步的收紧权限. 其P版本变更行为中就加入了对非SDK接 ...
Android P （9.0）刘海屏(DisplayCutout)适配方法
简介 Android P版本提供了统一的刘海屏方案和三方适配刘海屏方案: 对于有状态栏的页面,不会受到刘海屏特性的影响全屏显示的页面,系统刘海屏方案会对应用界面做下移处理,避开刘海区显示已经适配A ...
android刘海屏高度适配,Android刘海屏的适配
这里主要是介绍一下Android P中刘海屏的适配以及Android P之前的适配.为什么要分开呢?因为Android P之前官方还没提供API来进行适配,都是由各家厂商来提供适配方案的. 1.And ...
安卓P 刘海屏的适配
安卓P版本也就是刚发布的安卓9.0 其中就加入了刘海屏相关的API.其相关行为与功能变更也是非常多的,从其变更的趋势及功能来看,google在进一步的收紧权限. 其P版本变更行为中就加入了对非SDK接 ...

CSS 适配刘海屏 CSS适配iOS屏幕 ios可视窗口

CSS 适配刘海屏 CSS适配iOS屏幕 ios可视窗口

CSS 适配刘海屏 CSS适配iOS屏幕 ios可视窗口相关推荐

最新文章

热门文章