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中的call实现继承
Jan 22 Javascript
类似CSDN图片切换效果脚本
Sep 17 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
js+css3实现炫酷时钟
Aug 18 Javascript
夯基础之手撕javascript继承详解
Nov 09 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中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
python生成日历实例解析
2014/08/21 Python
十个Python程序员易犯的错误
2015/12/15 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
pygame实现五子棋游戏
2019/10/29 Python
python如何获取apk的packagename和activity
2020/01/10 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
附答案的Java面试题
2012/11/19 面试题
Java基础面试题
2012/11/02 面试题
2014年大学生党员评议表自我评价
2014/09/20 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
javascript函数式编程基础
2021/09/15 Javascript
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技