JavaScript 判断iPhone X Series机型的方法

2024-08-01 23:01:16

写在前面

如果有更优雅的方式，一定要告诉我！

现状

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变量提升和严格模式.分享给大家供大家参考,具体如下: 1.什么是变量提升所谓的变量提升指的是:函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体(作用域)的最顶部. 下面我们通过一个例子来详细说明一下. //变量声明在使用之前 var x; console.log(x);//undefined //变量声明在使用之后 console.log(y);//undefined var y; //上面的式子可以写成下面的样子 /* 变量提升:把x,y提
JavaScript私有变量实例详解

本文实例讲述了JavaScript私有变量.分享给大家供大家参考,具体如下: 任何在函数中定义的变量,就是私有变量,因为这些变量在函数外部是无法访问到的.总的来说,私有变量包括函数的参数.局部变量和在函数内部定义的其他函数. function add(num1, num2){ var sum = num1 + num2; return sum; } 上面的例子中的 num1, num2, sum 就是函数的私有变量. 如果在这个函数内部创建一个闭包,那么闭包通过自己的作用域链也可以访问这些变量,
javascript json字符串到json对象转义问题

在使用JavaScriptSerializer.Serialize 方法转json对象时,遇到一个问题,后台方法生成的json字符串中有没有转义的特殊字符代码: 而这些特殊的代码在使用javascript的转json对象方法时报错,为了讲这个转义的东西转义过来,折腾了半天.着实对javascript无语: 后台代转的对象是 Dictionary<string,string> DepartmentsExistTaskCounts 前台页面使用的MVC里的razor 写法,直接使用后台方法把数据转
使用JavaScript保存文本文件到本地的两种方法

一段使用javascript保存文件的代码.这里方法可以保存指定id元素下的所有html内容:不过这个方法只支持IE浏览器. function createHtml() { try { save_record("index1", $("#yhtcprediv").html()); } catch (e) { alert(e); } } function save_record(filename, content) { //打开新窗口保存 var winRecord
谈谈为什么你的 JavaScript 代码如此冗长

又一年过去了,JavaScript发生了许多变化.但是,即使是2019年了,还是需要给一些帮助你编写干净.整洁.有效.且具有扩展性的代码建议. 下面是让你成为更好的开发者的9条建议. 1. async / await 如果你还在为回调陷阱烦恼不已,那么就应该赶快扔掉这些2014年的代码了.除非绝对必要(比如某个库要求回调,或者出于性能的原因),否则不要再用回调了.Promise也不错,但当代码规模越来越大时,它们总是有些别扭. 我的解决方案就是async / await,能让阅读代码变得更容易,
JavaScript之解构赋值的理解

1. ES6的新特性允许将对象或者数组'分解'成多个单独的值, 以对象的解构开始. 代码示例 2. 说明 1). 定义一个对象 const obj={b:2,c:3,d:4}; 此时系统中没有变量b, 变量c与变量d 2). 开始解构该对象, const {a,b,c} = obj 这句话的意思是, 定义a,b,c三个变量, 然后在obj对象中寻找a,b,c变量, 如果找到, 则赋值给对应的变量所以, a, 已定义, 但是未赋值. 定义是在const{a,b,c}中定义的, 而没有在obj
JavaScript中的"=、==、==="区别讲解

= 是赋值运算,== 用于一般比较,=== 用于严格比较 == 在比较的时候可以转换数据类型: === 严格比较,只要类型不匹配就返回flase. 举例说明: "1" == true 类型不同,"=="将先做类型转换,把true转换为1,即为 "1" == 1: 此时,类型仍不同,继续进行类型转换,把"1"转换为1,即为 1 == 1: 此时,"==" 左右两边的类型都为数值型,比较成功! 如果比较:&qu
JavaScript中的回调函数实例讲解

在JS中,函数可以作为参数传递给函数,不止可以传递值或者对象,案例如下: 定义: /** *@project: data_overnance *@package: *@date:2018/11/30 0030 15:07 *@author 郭宝 *@brief: 回调函数 */ export default class Person { constructor(){ } /** * 设置名称 * @param nameCallback 传入回调函数 */ setName(nameCallback
解析JavaScript的ES6版本中的解构赋值

什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性值赋给一系列变量.这个语法非常简洁,而且比传统的属性访问更加清晰. 在不使用解构赋值的情况下,访问数组的前三项: var first = someArray[0]; var second = someArray[1]; var third = someArray[2]; var first = someArray[0]; var second = someArray[1]; var third = someArray
使用javascript做时间倒数读秒功能的实例

某个试卷在线考试需要读秒.网上找了一会就是没找到我想要的.只好自己改改网上的,这也用用,那也用用. 其他代码不贴了.贴相关的: html页面代码: <a class="btn btn-default" onclick="StartExamine();">开始</a> <div id="TimeClock" class="col-md-4" ><span class="text

JavaScript 判断iPhone X Series机型的方法

相关推荐

随机推荐