iphone各版本分辨率
机型的大小和像素【iphoneX 、iphoneXS、iphoneXSMax、iphoneXR】
手机型号 | 开发尺寸 | 像素 | 命名 | Device pixel ratio |
---|---|---|---|---|
iPhone XS Max | 414 x 896 | 1242 x 2688 | Default-1242h@3x | 3 |
iPhoneXR | 414 x 896 | 828 x 1792 | Default-828h@2x | 2 |
iPhoneX, XS | 375 x 812 | 1125 × 2436 | Default-812h@3x | 3 |
iPhone6/7/8Plus | 375 x 812 | 1242 × 2208 | Default-736h@3x | 3 |
iPhone6/7/8 | 375 X 667 | 750 × 1334 | Default-667h@2x | 2 |
iPhone5s,se | 320 x 240 | 640 × 1136 | Default-568h@2x | 2 |
iPhone4s | 640 × 960 | 320 x 240 | Default@2x | 2 |
注意:开发人员只需要记住开发尺寸
屏幕组成
齐刘海(44px) + 安全区域 + 手势区域(34px)
适配方案
- viewport-fit
viewport-fit="contain"展示区域在安全区中,不包括齐刘海和底部手势区域
viewport-fit="cover"展示区域整个屏幕中,包括齐刘海和底部手势区域
所以使用viewport-fit="contain"就可以解决适配问题,将下面的代码放在标签中。
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=contain">
- css媒体查询
/* x xs */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {// iphoneX iphoneXS样式
}/* xr */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {// iphoneXR样式
}/* xs max */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {// iphoneXR样式
}
- js判断
通过window.navigator.userAgent、window.devicePixelRatio、window.screen三个属性来匹配
// X、XS机型js检查
let isIphoneX = (/iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812)// XR机型js检查
let isIphoneXr = (/iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896)// XS MAX机型js检查
let isIphoneXsMax = (/iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896)// iphoneX系列机型js检查
// is iphone
function isIphone() {return /iphone/gi.test(window.navigator.userAgent)
}// 是否是iphone系机型
function isIphonXSeries() {if (typeof window !== 'undefined' && window) {return /iphone/gi.test(window.navigator.userAgent) && window.screen.height >= 812;}return false;
}
各个型号的UserAgent
●iOS
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C28 Safari/419.3
●iOS2
Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_0 like Mac OS X; ja-jp) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5A347 Safari/52
Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_0 like Mac OS X; ja-jp) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5A345 Safari/525.20
Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_0_1 like Mac OS X; ja-jp) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5B108 Safari/525.20
Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_1 like Mac OS X; ja-jp) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5F136 Safari/525.20
●iOS3
Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16
Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_3 like Mac OS X; ja-jp) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7E18 Safari/528.16
●iOS4
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0_1 like Mac OS X; ja-jp) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A306 Safari/6531.22.7
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0_2 like Mac OS X; ja-jp) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A400 Safari/6531.22.7
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; ja-jp) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8F190 Safari/6533.18.5
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_1 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8G4 Safari/6533.18.5
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_4 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8K2 Safari/6533.18.5
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_5 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Mobile/8L1
●iOS5
Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9A334 Safari/7534.48.3
Mozilla/5.0 (iPhone; CPU iPhone OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9A405 Safari/7534.48.3
Mozilla/5.0 (iPhone; CPU iPhone OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3
●iOS6
Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25
■iPod●iOS2
Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3A100a Safari/419.3
Mozilla/5.0 (iPod; U; CPU iPhone OS 2_1 like Mac OS X; ja-jp) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5F137 Safari/525.20
●iOS4
Mozilla/5.0 (iPod; U; CPU iPhone OS 4_1 like Mac OS X; ja-jp) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B118 Safari/6531.22.7
Mozilla/5.0 (iPod; U; CPU iPhone OS 4_2_1 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5
Mozilla/5.0 (iPod; U; CPU iPhone OS 4_3_5 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8L1 Safari/6533.18.5
●iOS5
Mozilla/5.0 (iPod; CPU iPhone OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A405 Safari/7534.48.3
■iPad●iOS3
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B367 Safari/531.21.10
Mozilla/5.0 (iPad; U; CPU OS 3_2_1 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Mobile/7B405
●iOS4
Mozilla/5.0 (iPad; U; CPU OS 4_2 like Mac OS X; zh-cn) AppleWebKit/533.17.9 (KHTML, like Gecko) Mobile/8C134
Mozilla/5.0 (iPad; U; CPU OS 4_3 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8F190 Safari/6533.18.5
Mozilla/5.0 (iPad; U; CPU OS 4_3_1 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8G4 Safari/6533.18.5
Mozilla/5.0 (iPad; U; CPU OS 4_3_2 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5
Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5
Mozilla/5.0 (iPad; U; CPU OS 4_3_4 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8K2 Safari/6533.18.5
Mozilla/5.0 (iPad; U; CPU OS 4_3_5 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8L1 Safari/6533.18.5
●iOS5
Mozilla/5.0 (iPad; CPU OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A405 Safari/7534.48.3
Mozilla/5.0 (iPad; CPU OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3
●iOS6
Mozilla/5.0 (iPad; CPU OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25
iphone各版本分辨率相关推荐
- iPhone 4S版本查看
iPhone 的版本可以通过进入[设置 -> 通用-> 关于本机],根据型号最后2位查看: CH是国行,ZP是港版和澳门版,TA是台版,ZA新加坡和马来西亚版,RS是俄罗斯版, P是意大利 ...
- ipad与iphone的屏幕分辨率
1.ipad分辨率,iphone 6 iPhone设备 尺寸 分辨率 点 iPhone 3和3s 3.5英寸 (320×480) ...
- 如何用代码获取Iphone 系统版本型号
我做的某一功能模块,在不同版本Iphone OS 上用不同的代码实现. 如何用代码获取Iphone 系统版本型号呢? 用没有类似的宏定义,可以让不同版本的OS跑不同的代码,譬如: #ifdefine ...
- 如何为iPhone 5屏幕分辨率开发或迁移应用程序?
本文翻译自:How to develop or migrate apps for iPhone 5 screen resolution? The new iPhone 5 display has a ...
- iPhone各版本屏幕尺寸
设备 宽 高 对角线 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI iPhone Width Height Diagonal 3GS 2.4 inche ...
- 关于iPhone尺寸与分辨率
浅谈不同型号iPhone的尺寸与不同的分辨率 首先谈谈编者对分辨率这个概念的认知,分辨率与清晰度挂钩,同样尺寸的视图,分辨率越高清晰度越好.另外还要引出一个重要的概念:PPI(pixels per i ...
- 【IOS】关于ipad和iPhone尺寸的分辨率
文章结合至 http://blog.csdn.net/djxiaoyu_haha/article/details/41009575 http://news.zol.com.cn/536/5361639 ...
- iPhone 越狱版本打包
前几天把带着证书直接打包成Ad-Hoc版本,保存后发给91渠道审核,反馈说是安装不成功.后来试了试这样的打包,在完美越狱的iPhone手机是能安装的. 在打开Organizer的Archives,点D ...
- @media媒体查询判断ipad和iPhone各版本
Media Queries这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式. /* 判断ip ...
最新文章
- VTK:几何对象之Line
- Linux下通用的Makefile
- ubuntu14安装python_ubuntu14.04 安装python3.7
- ASP.Net 附加调试,aspnet_wp.exe进程不能启动解决办法 .
- 【线程】——等待集(wait,notify,notifyAll)
- 鲍鱼的“几头”是什么意思?什么样的好吃?
- 蓝桥杯 ALGO-115 算法训练 和为T Java版
- django xadmin 集成DjangoUeditor富文本编辑器
- GEE、USGS、地理空间数据云上下载武汉地区的影像数据
- Unix网络编程5种IO模型
- NTC热敏电阻应用-测温
- MVC3.0 开发过程中遇到错误及解决方案(不断更新中。。。)
- C盘中的Users\admin文件夹太大清理方法
- 怎么用计算机弹出soldout,关于sellout和soldout。
- MSP430F149小系统开发板实现RS232串口通信
- 无线键盘全国产化电子元件推荐方案
- Excel VBA将所有Sheet重命名为单元格a1的名称
- 余秋雨 成熟是一种明亮而不刺眼的光辉
- 2021字节跳动校招秋招算法面试真题解题报告--leetcode148 排序链表,内含7种语言答案
- python 1014 福尔摩斯的约会 (20 分)