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 验证表单(form)中的单选(radio)值
Sep 08 Javascript
div模拟滚动条效果示例代码
Oct 16 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
返回上一个url并刷新界面的js代码
Sep 12 Javascript
原生js+css实现tab切换功能
Sep 17 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 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中Collection 类的设计
2013/06/21 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
Vue组件开发初探
2017/02/14 Javascript
手机端转换rem适应
2017/04/01 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
Python 操作文件的基本方法总结
2017/08/10 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
Python简单基础小程序的实例代码
2019/04/28 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
python如何基于redis实现ip代理池
2020/01/17 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
汽车检测与维修个人求职信
2013/09/24 职场文书
初中美术教学反思
2014/01/29 职场文书
渡河少年教学反思
2014/02/12 职场文书
领导干部学习心得体会
2016/01/23 职场文书
分享提高 Python 代码的可读性的技巧
2022/03/03 Python
Golang bufio详细讲解
2022/04/21 Golang