JavaScript判断苹果 iPhone X Series 机型
原文链接: JavaScript 判断 iPhone X Series 机型
现状
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判断苹果 iPhone X Series 机型的更多相关文章
- 《如何使用Javascript判断浏览器终端设备》
WEB开发中如何通过Javascript来判断终端为PC.IOS(iphone).Android呢? 可以通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端. va ...
- 如何使用Javascript判断浏览器终端设备
WEB开发中如何通过Javascript来判断终端为PC.IOS(iphone).Android呢? 可以通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端 var ...
- javascript判断浏览器的版本
在javascript中直接的使用navigator.userAgent就可以获取当前浏览器的版本等信息,以下是列出来的关于不同浏览器显示的值(Windows.Android.iPhone): IE6 ...
- javascript判断访问终端,手机端自动跳转
在网页的顶部加入javascript判断代码: function checkserAgent(){ var userAgentInfo=navigator.userAgent; var userAge ...
- JavaScript判断移动端及pc端访问不同的网站
JavaScript判断移动端及pc端访问不同的网站 现在很多网站都是分为两个版本,一个pc端的一个移动端的(响应式除外),针对这两个版本,就需要对访问的设备进行判断,如果是pc,就直接访问pc网站, ...
- JavaScript判断浏览器类型及版本
JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来分辨,另一 ...
- 通过JavaScript判断当前浏览器版本
从别人处拷贝,只用于自己学习之用.参考源自:http://www.cnblogs.com/leadzen/archive/2008/09/06/1285764.html JavaScript是前端开发 ...
- H5页面适配所有iPhone和安卓机型的六个技巧
http://www.th7.cn/web/html-css/201605/166006.shtml http://www.th7.cn/web/html-css/201601/153127.shtm ...
- 【iOS】判断苹果的设备是哪种
有时候需要判断苹果的设备是 iPhone 还是 iPad 等其他设备,示例代码如下: if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUs ...
随机推荐
- vue2.x入坑总结—回顾对比angularJS/React的一统
从感性的角度讲,我是不屑于用VUE,觉得react套件用起来更顺手,但是vue现在越来火,所以也不得入vue(杂烩汤)的坑.vue/anguarJS/React,三者对关系现在就是: https:// ...
- PureMVC 官方文档翻译(一)
最近在学习PureMVC框架,感觉最权威的还是阅读官方文档,顺便翻译了下全当记笔记了. PureMVC概览 这篇文档他讨论PureMVC框架的类和接口,使用UML来阐述它们的角色.职责和协作. Pur ...
- window注册鼠标右键菜单,及子菜单
最近项目中要用到c#并且要注册鼠标点击右键菜单,在这里总结了几种方法以便记录 效果图: 1,reg注册,创建.reg文件,内容如下 Windows Registry Editor Version 5. ...
- Excel坐标自动在AutoCad绘图_2
众所周知,Excel对数据处理的功能非常强大,它可以进行数据处理.统计分析已经辅助决策的操作,该软件已经渗透到各个领域.作为一个测绘人,GISer, 也经常利用excel完成一些测量表格的自动化计算, ...
- Delphi中PointerMath指令
Type Switch Syntax {$POINTERMATH ON} or {$POINTERMATH OFF} Default {$POINTERMATH OFF} Sc ...
- windows 共享文件
- 转--Python re模块 验证11位手机号
一.常用正则表达式符号和语法: '.' 匹配所有字符串,除\n以外 ‘-’ 表示范围[0-9] '*' 匹配前面的子表达式零次或多次.要匹配 * 字符,请使用 \*. '+' 匹配前面的子表达 ...
- SpringBoot Controller接收参数的几种常用方式
第一类:请求路径参数1.@PathVariable获取路径参数.即url/{id}这种形式. 2.@RequestParam获取查询参数.即url?name=这种形式 例子GET http://loc ...
- java线程学习之notify方法和notifyAll方法
notify(通知)方法,会将等待队列中的一个线程取出.比如obj.notify();那么obj的等待队列中就会有一个线程选中并且唤醒,然后被唤醒的队列就会退出等待队列.活跃线程调用等待队列中的线程时 ...
- vue路由详解
自己看vue文档,难免有些地方不懂,自己整理一下,主要是vue-router具体实现的操作步骤. 安装 直接下载/CDN https://unpkg.com/vue-router/dist/vue-r ...