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 相关文章推荐
ie 调试javascript的工具
Apr 29 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
python线程锁(thread)学习示例
2013/12/04 Python
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
Python爬取京东的商品分类与链接
2016/08/26 Python
python绘制直线的方法
2018/06/30 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
python温度转换华氏温度实现代码
2020/12/06 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
优秀教师获奖感言
2014/01/31 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
python中如何对多变量连续赋值
2021/06/03 Python
Python中Selenium对Cookie的操作方法
2021/07/09 Python
Java Socket实现多人聊天系统
2021/07/15 Java/Android