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表单验证代码
Aug 02 Javascript
jqPlot 基于jquery的画图插件
Apr 26 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
jQuery切换所有复选框选中状态的方法
Jul 02 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
react redux入门示例
Apr 19 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
基于JavaScript 实现拖放功能
Sep 12 Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
Vue中的字符串模板的使用
2018/05/17 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
python字符串过滤性能比较5种方法
2017/06/22 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
Python 元组操作总结
2019/09/18 Python
Python 获取项目根路径的代码
2019/09/27 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
HTML5地理定位实例
2014/10/15 HTML / CSS
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
土建资料员岗位职责
2014/01/04 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
大学学风建设方案
2014/05/04 职场文书
管理人员岗位职责
2015/02/14 职场文书
入党转正申请报告
2015/05/15 职场文书
导游词之山东八大关
2019/12/18 职场文书
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js