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 相关文章推荐
一些常用的Javascript函数
Dec 22 Javascript
js一组验证函数
Dec 20 Javascript
javascript 变量作用域 代码分析
Jun 26 Javascript
JavaScript学习笔记(十)
Jan 17 Javascript
JQuery循环滚动图片代码
Dec 08 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 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时间戳使用实例代码
2008/06/07 PHP
php smarty模版引擎中的缓存应用
2009/12/11 PHP
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
PHP中比较时间大小实例
2014/08/21 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
html5使用canvas画一条线
2014/12/15 HTML / CSS
介绍一下Python中webbrowser的用法
2013/05/07 面试题
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
什么是就业协议书
2014/04/17 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
2014年部门工作总结
2014/11/12 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL