uni-app - 检查机型是否为刘海屏（如iPhone X）

前言

有时候，普通机型的界面，到刘海屏上就会有问题，尤其是顶部最容易出问题。

如果知道了是否是刘海屏，那么我们可以动态设置一些 css 属性，来兼容样式。

实现

利用 5+ API 可查询当前设备是否为刘海屏。

plus.navigator.hasNotchInScreen()

返回值为 Boolean

演示

可在 onShow() 生命周期函数中直接判断：

if(plus.navigator.hasNotchInScreen(

uni-app - 检查机型是否为刘海屏（如iPhone X）相关推荐

html刘海屏高度,iphone刘海屏网页适配方法
1. 下面是实现iphonex 刘海屏前端网页适配的一个插值算法小案例 Title body, ul { margin: 0; } ul { padding-left: 10px; } li { li ...
Android 浅谈适配全面屏、刘海屏、水滴屏
对刘海屏.水滴屏做适配前,先在此给出一个基本概念:何谓刘海屏?何谓水滴屏? 上述两种屏幕都可以统称为刘海屏,不过对于右侧较小的刘海,业界一般称为水滴屏或美人尖. 目前国内流行的手机厂商主要有:vivo ...
H5：IOS刘海屏适配
场景 app部分页面使用H5混合开发,框架使用的是Vue.页面基本在Android上展示正常,在ios(iPhone 7.iPhone X.iPhone 11)上会出现两个问题: (1) 顶部标题栏即 ...
Android 系统（70）---Android刘海屏适配方案
Android刘海屏适配方案什么是刘海屏随着iPhone X发布,国内一些厂商也推出了刘海屏手机,即将发布的Android p也提供了对刘海屏的支持.so,我们的app也要提前做好适配. 屏幕的正 ...
全面屏/刘海屏及虚拟键适配--总结版
什么是刘海屏? 随着iPhone X发布,刘海屏手机大行其道 ,Google Android P版本的发布,也引入了刘海屏的概念即将发布的Android p也提供了对刘海屏的支持.像华为P20 p ...
iOS——判断刘海屏
在写项目时,发现在非刘海屏型号的iPhone上测试的UI界面,有时候在刘海屏iPhone会被遮挡.这时候,我们需要判断当前设备是否是刘海屏,以来对UI代码做相应的适配,以下是学习的几种方案. 判断手机 ...
【uni-app】解决iPhone X “刘海屏”兼容性问题
开发微信小程序时设置为自定义导航,在iPhone X这种有刘海屏的手机中预览会发现自定义导航与"刘海"之间的距离对比原生导航有些差异,用户体验不是很好. 这里可以使用uni.get ...
android兼容oppo手机刘海屏解决方案
引用自OPPO官方文档,这里缩减了一些内容,选取重要内容,包括oppo沉浸式的兼容. 转载请标明出处: https://blog.csdn.net/DJY1992/article/details/80 ...
Android P版本刘海屏适配与WindowInsets，DisplayCutout使用
Android P版本的发布,引入了刘海屏的概念,像华为nova 3e,vivo X21等手机厂商也纷纷推出自己的刘海屏手机,我们先预览下HUAWEI nova 3e的机照从这张图中我们可以看出,所 ...

uni-app - 检查机型是否为刘海屏（如iPhone X）

前言

实现

演示

uni-app - 检查机型是否为刘海屏（如iPhone X）相关推荐

最新文章

热门文章