JS判别是否为X以上刘海屏

JS判别是否为X以上刘海屏：

const isIphonex = () => { // X XS, XS Max, XR,11,11Pro,11Pro Max

const xSeriesConfig = [{

devicePixelRatio: 3,

width: 375,

height: 812,

{

devicePixelRatio: 3,

width: 414,

height: 896,

{

devicePixelRatio: 2,

width: 414,

height: 896,

]; // h5

if (typeof window !== 'undefined' && window) {

const isIOS = /iphone/gi.test(window.navigator.userAgent);

if (!isIOS) return false;

const {

devicePixelRatio,

screen

} = window;

const {

width,

height

} = screen;

let flag = xSeriesConfig.some(item => item.devicePixelRatio === devicePixelRatio && item.width === width && item.height === height);

return flag;

}

return false;

}

JS判别是否为X以上刘海屏相关推荐

uniapp兼容iPhoneX头部状态栏(刘海屏）和底部小横条
文章目录 (一)兼容 iphoneX 头部状态栏方式一:封装状态栏组件 statusBar.vue 方式二:不封装组件方式三:使用 Vuex 管理完整demo展示: (二)兼容 iPhoneX ...
Android 浅谈适配全面屏、刘海屏、水滴屏
对刘海屏.水滴屏做适配前,先在此给出一个基本概念:何谓刘海屏?何谓水滴屏? 上述两种屏幕都可以统称为刘海屏,不过对于右侧较小的刘海,业界一般称为水滴屏或美人尖. 目前国内流行的手机厂商主要有:vivo ...
小程序解决自定义导航栏--刘海屏自适应问题
小程序解决自定义导航栏–刘海屏自适应问题今天做一个自定义的导航栏.iPhoneX和安卓的样式一直都是不一样,后面看了一些方法,解决了这个问题. 第一步(Json) "navigationS ...
小程序自定义导航（适配所有手机包括刘海屏），iPhone8以上机型的底部横条遮挡问题
** 自定义顶部导航 ** 备注:无法实现顶部导航的安卓靠左,IOS居中的现象 1. 隐藏小程序自带的顶部导航在页面的json或app.json中添加(隐藏顶部导航): "navigati ...
沉浸式，状态栏高度，刘海屏怎么开启，适配
沉浸式,状态栏高度,刘海屏怎么开启,怎么适配?看这! 何为沉浸式? 沉浸式就是app的头部和状态栏和何为一体的,webview即为整个手机的高度何为状态栏? 状态栏就是手机顶部,显示时间电量那一行 ...
uni-app刘海屏处理
前提:本次主要是解决刘海屏的问题,比如下面这种: 1.在main.js封装一个函数(全局封装,这样子就可以在任意页面用this调用该函数) Vue.prototype.getPhoneInfo = f ...
android兼容小米xiaomi刘海屏解决方案
引用自小米官方文档,这里缩减了一些内容,捡取重要内容. 转载请标明出处: https://blog.csdn.net/DJY1992/article/details/80688376 本文出自:[奥特 ...
一大波 Android 刘海屏来袭，全网最全适配技巧！
一.序 Hi,大家好,我是承香墨影! Apple 一直在引领设计的潮流,自从 iPhone X 发布之后,"刘海屏" 就一直存在争议.不过不管你怎样,Android 也要跻入 &q ...
android屏幕适配的五种方式_讲一讲Android 9.0系统的新特性，对刘海屏设备进行适配...
黑客技术点击右侧关注,了解黑客的世界! Java开发进阶点击右侧关注,掌握进阶之路! Python开发点击右侧关注,探讨技术话题!作者丨郭霖来源丨郭霖(guolin_blog) 其实Android 9 ...

JS判别是否为X以上刘海屏

JS判别是否为X以上刘海屏相关推荐

最新文章

热门文章