JavaScript 判断iPhone X Series机型的方法


Posted in Javascript onJanuary 28, 2019

写在前面

如果有更优雅的方式,一定要告诉我!

现状

iPhone X 底部是需要预留 34px 的安全距离,需要在代码中进行兼容。

现状对于 iPhone X 的判断基本是这样的:

// h5
export const isIphonex = () => /iphone/gi.test(navigator.userAgent) && window.screen && (window.screen.height === 812 && window.screen.width === 375);

这在之前是没问题的,新的 iPhone X Series 设备发布之后,这个就会兼容就有问题。

iPhone X Series 参数

机型 倍率 分辨率 pt
iPhone X 3 2436 × 1125 812 × 375
iPhone XS 3 2436 × 1125 812 × 375
iPhone XS Max 3 2688 × 1242 896 × 414
iPhone XR 2 1792 × 828 896 × 414

width === 375 && height === 812 只能识别出 iPhone X 和 iPhone XS,对于 iPhone XS Max 和 iPhone XR 就无能为力了。

解决方法

对每个机型进行判断

const isIphonex = () => {
 // X XS, XS Max, XR
 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;
 return xSeriesConfig.some(item => item.devicePixelRatio === devicePixelRatio && item.width === width && item.height === height);
 }
 return false;
}

统一处理方法

因为现在 iPhone 在 iPhone X 之后的机型都需要适配,所以可以对 X 以后的机型统一处理,我们可以认为这系列手机的特征是 ios + 长脸。

在 H5 上可以简单处理。

const isIphonex = () => {
 if (typeof window !== 'undefined' && window) {
 return /iphone/gi.test(window.navigator.userAgent) && window.screen.height >= 812;
 }
 return false;
};

媒体查询

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
}
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
}
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
}

媒体查询无法识别是不是 iOS,还得加一层 JS 判断,否则可能会误判一些安卓机。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
javascript 用函数实现继承详解
May 28 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 #Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 #Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 #jQuery
详解项目升级到vue-cli3的正确姿势
Jan 28 #Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 #jQuery
this在vue和小程序中的使用详解
Jan 28 #Javascript
Vue加载json文件的方法简单示例
Jan 28 #Javascript
You might like
PHP获取url的函数代码
2011/08/02 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
Python学习笔记_数据排序方法
2014/05/22 Python
Python生成不重复随机值的方法
2015/05/11 Python
Django接收自定义http header过程详解
2019/08/23 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
外包公司软件测试工程师
2014/11/01 面试题
小学数学课后反思
2014/04/23 职场文书
比赛主持人开场白
2015/05/29 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js