IphoneX适配问题 iOS刘海屏安全区域处理

前言
- 适配前需要了解的几个关键字
- - 安全区域
  - viewport-fit
  - env() 和 constant()
- 适配的方法
- - 第一步设置网页在可视区的布局方式，增加viewport-fit属性 *viewport-fit=cover*
  - 第二步页面主体内容限制在安全区域内
  - 第三步 fixed元素的适配

前言

iPhoneX去掉了底部的按键，增加了小黑条，这就使得网页工作者需要做一下适配。

适配前需要了解的几个关键字

安全区域

安全区域是指不受圆角、刘海屏、小黑条影响的区域，所以要确保你的内容显示在安全区域内

官网的图片解释，具体信息可移步human-interface-guidelines/ios/visual-design

viewport-fit

这是iOS11的新增特性，为了兼容刘海屏新推出的对viewport meta的一个扩展，属性值有三个。

cantain 可视窗口完全显示网页内容(左)
cover 网页内容完全覆盖可视窗口(右)
auto 效果与contain 相同

详细解释viewport-fit-descriptor

env() 和 constant()

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离
constant()是兼容< iOS11.2
env() 兼容 >= ios11.2

适配的方法

第一步设置网页在可视区的布局方式，增加viewport-fit属性 viewport-fit=cover

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">

第二步页面主体内容限制在安全区域内

body {padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);
}

第三步 fixed元素的适配

通过增加内边距的方式或者设置bottom值

{padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);
}

如果有预设的边距值，可以使用calc()进行计算

{padding-bottom: calc(60px(假设值) + constant(safe-area-inset-bottom));padding-bottom: calc(60px(假设值) + env(safe-area-inset-bottom));
}

这样处理基本就没问题。
文章原出处凹凸实验室

iPhoneX适配问题 iOS刘海屏安全区域处理 IOS小黑条处理 IOS兼容处理相关推荐

H5：IOS刘海屏适配
场景 app部分页面使用H5混合开发,框架使用的是Vue.页面基本在Android上展示正常,在ios(iPhone 7.iPhone X.iPhone 11)上会出现两个问题: (1) 顶部标题栏即 ...
Unity 一分钟学会适配IOS刘海屏
IOS刘海屏适配项目上线了总免不了适配问题,Unity UGUI的锚点针对于Andorid平台的适配还是很不错的,只需调整Match为1 即可让渲染的画面处于屏幕的安全位置之内, 但到了苹果平台上往 ...
unity5.6.5适配Android P刘海屏,两侧去黑边
unity5.6.5适配Android P刘海屏,两侧去黑边问题: 如果不适配安卓P的话,有刘海屏的手机,刘海两侧会有黑边, 两侧默认是不渲染的,所以要渲染出来就得先适配一下解决方法: 我是用ec ...
h5 iOS 刘海屏适配
之前做app内嵌页时,按照机型做了齐刘海适配,到现在iPhone12发布后,发现ios 齐刘海机型很多,所以按照机型适配有点繁琐,统一修改如下. 先看一下各个机型以及分辨率:https://www.t ...
Unity适配IOS刘海屏
实现靠顶端对齐的UI在刘海屏往下偏移,并且用黑色图片填充适配前: 适配后: public class SafeAreaFitter : MonoBehaviour {// Start is call ...
uniapp兼容iPhoneX头部状态栏(刘海屏）和底部小横条
文章目录 (一)兼容 iphoneX 头部状态栏方式一:封装状态栏组件 statusBar.vue 方式二:不封装组件方式三:使用 Vuex 管理完整demo展示: (二)兼容 iPhoneX ...
APP适配安卓手机刘海屏
如果你想允许全屏界面内容显示到刘海区域 ,只要在AndroidManifest.xml文件里配置如下代码即可:  <m ...
Android适配全面屏/刘海屏
目前国内厂商已经推出的刘海屏Android手机有华为P20 pro, vivo X21,OPPO R15. 1.华为刘海屏的官方适配文档 https://devcenter-test.huawei.c ...
android9的手机,Android9.0全面适配18:9刘海屏，全面屏安卓手机即将大规模上市
经常使用安卓手机的小伙伴应该不难发现,Android最近几年有一条明显的发展曲线.Android5.0之前比较缓慢,Android5.0换了框架之后,Android系统焕发新生,卡顿已经成为过去式.5 ...

iPhoneX适配问题 iOS刘海屏安全区域处理 IOS小黑条处理 IOS兼容处理

IphoneX适配问题 iOS刘海屏安全区域处理

前言

适配前需要了解的几个关键字

安全区域

viewport-fit

env() 和 constant()

适配的方法

第一步设置网页在可视区的布局方式，增加viewport-fit属性 viewport-fit=cover

第二步页面主体内容限制在安全区域内

第三步 fixed元素的适配

iPhoneX适配问题 iOS刘海屏安全区域处理 IOS小黑条处理 IOS兼容处理相关推荐

最新文章

热门文章

iPhoneX适配问题 iOS刘海屏 安全区域处理 IOS小黑条处理 IOS兼容处理

IphoneX适配问题 iOS刘海屏 安全区域处理

前言

适配前需要了解的几个关键字

安全区域

viewport-fit

env() 和 constant()

适配的方法

第一步 设置网页在可视区的布局方式，增加viewport-fit属性 viewport-fit=cover

第二步 页面主体内容限制在安全区域内

第三步 fixed元素的适配

iPhoneX适配问题 iOS刘海屏 安全区域处理 IOS小黑条处理 IOS兼容处理相关推荐

最新文章

热门文章

iPhoneX适配问题 iOS刘海屏安全区域处理 IOS小黑条处理 IOS兼容处理

IphoneX适配问题 iOS刘海屏安全区域处理

第一步设置网页在可视区的布局方式，增加viewport-fit属性 viewport-fit=cover

第二步页面主体内容限制在安全区域内

iPhoneX适配问题 iOS刘海屏安全区域处理 IOS小黑条处理 IOS兼容处理相关推荐