iPhoneX 适配方案
绝对长度单位
英寸 | 厘米 | 毫米 | 磅 | pc |
---|---|---|---|---|
inch | cm | mm | pt | pica |
相对长度单位
是网页设计中使用最多的长度单位,包括px、em、rem
等
屏幕尺寸
指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米
iPhone 4/4S | iPhone 5/5C/5S/SE | iPhone 6/6S | iPhone 6S Plus | iPhone 7 | iPhone 7 Plus | iPhone 8 | iPhone 8 Plus | iPhone X |
---|---|---|---|---|---|---|---|---|
3.5英寸 | 4英寸 | 4.7英寸 | 5.5英寸 | 4.7英寸 | 5.5英寸 | 4.7英寸 | 5.5英寸 | 5.8英寸 |
屏幕分辨率
指在横纵向上的像素点数,单位是px,1px=1个像素点。一般以纵向像素*横向像素
来表示一个手机的分辨率,如1960*1080(这里的1像素指的是物理设备的1个像素点)
机型 | 分辨率 | 机型 | 分辨率 | 机型 | 分辨率 |
---|---|---|---|---|---|
iPhone 4/4S | 960*640 | iPhone 6S Plus | 1920*1080 | iPhone 8 Plus | 1920*1080 |
iPhone 5/5S | 1136*640 | iPhone 7 | 1334*750 | iPhone X | 2436*1125 |
iPhone SE | 1136*640 | iPhone 7 Plus | 1920*1080 | ||
iPhone 6/6S | 1334*750 | iPhone 8 | 1334*750 |
屏幕像素密度
屏幕上每英寸可以显示的像素点的数量,单位是ppi,即pixels per inch的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关,在单一变化条件下,屏幕尺寸越小、分辨率越高,像素密度越大,反之越小
- 屏幕上勾股定理算出对角线的分辨率:√(1920²+1080²)≈2203px
- 对角线分辨率除以屏幕尺寸:2203/5≈440dpi
1920^2 + 1080^2 ≈ 2203^2 //3686400 + 1166400 = 4852800
2203 / 5 ≈ 440
- 1
- 2
PPI与DPI
PPI(Pixel Per Inch by diagonal):表示沿着对角线,每英寸所拥有的像素(Pixel)数目
PPI数值越高,代表显示屏能够以越高的密度显示图像,即通常所说的分辨率越高、颗粒感越弱
ppi与dpi | 描述 |
---|---|
ppi |
pixels per inch ,屏幕上每英寸可以显示的像素点的数量,即屏幕像素密度
|
dpi |
dots per inch ,最初用于衡量打印物上每英寸的点数密度,就是打印机可以在一英寸内打多少个点。当dpi的概念用在计算机屏幕上时,就称之为ppi。ppi和dpi是同一个概念,Android比较喜欢使用dpi,IOS比较喜欢使用ppi
|
Viewport
移动端开发中,通常我们都会采用meta
标签设置viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- 1
viewport是什么?
通俗来讲,移动端的viewport就是我们所能看到的手机端浏览器的可视窗口大小,但viewport又不仅仅局限于可视窗口的大小,一般情况下,它是比默认窗口大小要大的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动端正常显示为桌面浏览器而设计的网页,移动端的浏览器都会默认把自己的默认的viewport设为980px到1024px不等,但其后果就是会出现横向滚动条,因为移动端浏览器可视区域的大小是比默认的viewport宽度要小的
参数 | 描述 |
---|---|
width | 设置layout viewport的宽度,为一个正整数,或字符串”device-width” |
initial-scale | 设置页面的初始缩放值,为一个数字,可以带小数 |
minimum-scale | 允许用户的最小缩放值,为一个数字,可以带小数 |
maximum-scale | 允许用户的最大缩放值,为一个数字,可以带小数 |
height | 设置layout viewport 的高度,这个属性对我们并不重要,很少使用 |
user-scalable | 是否允许用户进行缩放,值为”no”或”yes”, no 代表不允许,yes代表允许 |
不同的设备对1px有不一样的定义
在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中,我们无需对这个津津计较,但在移动设备上,必须弄明白这点。在早先的移动设备中,屏幕像素密度都比较低,如iphone3,它的分辨率为320x480,在iphone3上,一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展,移动设备的屏幕像素密度越来越高,从iphone4开始,苹果公司便推出了所谓的Retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的。
在移动端浏览器中以及某些桌面浏览器中,window对象有一个devicePixelRatio属性,它的官方的定义为:设备物理像素和设备独立像素的比例,也就是devicePixelRatio = 物理像素 / 独立像素
。css中的px就可以看做是设备的独立像素,所以通过devicePixelRatio,我们可以知道该设备上一个css像素代表多少个物理像素。例如,在Retina屏的iphone上,devicePixelRatio的值为2,也就是说1个css像素相当于2个物理像素
其实就是移动端和PC端的px是不同的,移动端的屏幕可视区域(viewport)小但像素多,所以跟PC相比的每个独立像素点的物理像素是多的,也就是移动端物理像素更密集,所以更PC的独立像素有dp
的倍数转换
在进行具体的分析之前,首先得知道下面这些关键性基本概念(术语)。
物理像素(physical pixel)
一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值。
设备独立像素(density-independent pixel)
设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素。
所以说,物理像素和设备独立像素之间存在着一定的对应关系,这就是接下来要说的设备像素比。
设备像素比(device pixel ratio )
设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系,它的值可以按如下的公式的得到:
设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上,x方向或者y方向
- 1
还可以通过window.devicePixelRatio获取到当前设备的dpr
window.devicePixelRatio
- 1
机型 | iPhone 3G/3GS | iPhone 4/4S | iPhone 5/5C/5S/SE | iPhone 6/6S | iPhone 6S Plus | iPhone 7 | iPhone 7 Plus | iPhone 8 | iPhone 8 Plus | iPhone X |
---|---|---|---|---|---|---|---|---|---|---|
屏幕尺寸 | 3.5英寸 | 3.5英寸 | 4英寸 | 4.7英寸 | 5.5英寸 | 4.7英寸 | 5.5英寸 | 4.7英寸 | 5.5英寸 | 5.8英寸 |
独立像素(CSS像素) | 480*320 | 480*320 | 568*320 | 667*375 | 736*414 | 667*375 | 736*414 | 667*375 | 736*414 | 812*375 |
物理像素(分辨率) | 480*320 | 960*640 | 1136*640 | 1334*750 | 1920*1080(2208x1242) | 1334*750 | 1920*1080 | 1334*750 | 1920*1080 | 2436*1125 |
ppi/dpi(像素密度) | 163 | 326 | 326 | 326 | 401 | 326 | 401 | 326 | 401 | 458 |
dpr(倍图) | 1 | 2 | 2 | 2 | 3(2.5) | 3 | 3 | 3 | 3 | 3(2.9) |
如果APP要同时兼容iPhone3GS~iPhone6+,则需要提供icon.png/icon@2x.png/icon@3x.png三种分辨率的图片
在Android中,规定以160dpi为基准,1dp=1px。如果密度是320dpi,则1dp=2px,以此类推
2K分辨率指的是屏幕分辨率达到了一种级别,指屏幕横向像素达到2000以上(iPhone X是2K屏)
iPhoneX的适配
background-color
如果网页设置了一个背景颜色,那么最简单解决方案是,在body节点设置background-color
,使背景颜色填充整个屏幕,从而解决横屏显示左右白边的问题
viewport-fit
<!--默认值:可视窗口完全包含网页内容 相当于在安全区域展示-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=auto">
<!--或-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=contain">
<!--网页内容完全覆盖可视窗口-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
- 1
- 2
- 3
- 4
- 5
- 6
viewport-fit | 描述 | 示例 | 示例 | 示例 |
---|---|---|---|---|
auto/contain |
默认值,页面内容显示在safe area 内
|
示例1 | ||
cover | 页面内容充满屏幕 | 示例1 | 示例2 | 示例3 |
横屏列表侧刘海 | 横屏下列表环绕刘海 | 示例1 |
设置auto前
设置cover后
safe-area-inset-*
在设置viewport-fit=cover
之后,Web中会新增四个常量
safe-area-inset-top
safe-area-inset-right
safe-area-inset-left
safe-area-inset-bottom
- 1
- 2
- 3
- 4
分别表示safe area和可视窗口viewport顶部,右边,左边,底部的间距,可以用于设置margin和padding或者绝对定位时left和top
注意:在横屏和竖屏状态下,safe-area-inset-*的值不同
为了解决应用viewport-fit=cover
之后,有些显示内容被裁剪的问题,我们可以通过添加边距使得网页主要内容处于safe area中不被裁剪,解决方式如下
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
- 1
示例,比如下面是顶部导航条的适配,能让左上右都能出现padding来让元素保留在安全区域以内
总结为,我们可以利用safe-area-inset-*
做以下适配,详细请看DEMO
- 竖屏下,对底部做
padding-bottom: constant(safe-area-inset-bottom);
,其他设置是无意义的 - 横屏下,对底部设置左,下,右的
safe-area-inset-*
,对头部设置左和右的safe-area-inset-*
,其他设置也是无意义的
<header><button>返回</button> 头部</header>
<style>* {margin: 0;padding: 0;}body {width: 100%;height: 100%;//设置背景颜色,也是一种适配方案background-color: #A4F4B0;}header {background-color: red;height: 50px;line-height: 50px;width: 100%;color: white;position: fixed;left: 0;right: 0;top: 0;bottom: 0px;//cover下元素出现对应的padding来适配padding-left: constant(safe-area-inset-left);padding-right: constant(safe-area-inset-right);//padding-bottom: constant(safe-area-inset-bottom);padding-top: constant(safe-area-inset-top);}button {display: inline-block;background-color: blue;color: white;border: none;height: 50px;width: 80px;//字体记得必须设置,不然按钮会有像素的误差font-size: 18px;}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
媒体查询
device-width |
device-height |
-webkit-device-pixel-ratio |
注意-webkit-device-pixel-ratio
必须加前缀,否则无效
/*iPhoneX的适配*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {header {background-color: black;}
}
/*iPhone8P的适配*/
@media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) {header {background-color: deepskyblue;}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
参考文档
- iPhone-X适配方案
- 移动端高清、多屏适配方案
- 手淘移动端适配的方案学习和相关思考
- 手淘适配方案lib-flexible
iPhone X适配参考文档
- iPhone X的Web设计
- 剖析 iOS 11 网页适配问题
- 关于H5页面在iPhoneX适配
iPhoneX 适配方案相关推荐
- Unity iPhoneX适配方案
baidu UNITY_IPHONE Unity iPhoneX适配方案[NGUI&UGUI] https://blog.csdn.net/qq_35936174/article/d ...
- 超简单的IphoneX适配方案
做游戏的都很厌恶刘海屏,特别是iphone,因为如果你不去适配iphoneX之后的手机,那么手机刘海的位置将会是黑的,这样你就拿不到苹果的推荐,而且IphoneX和安卓手机的刘海屏还有一个不同,就是I ...
- 适用于hips ui的iPhoneX及以上适配方案
版本信息: hips ui: 0.1.43 须知: 随着hips ui的迭代,可能会解决适配问题,所以下面的方案是有时效性的. 如果你项目上很紧急,可以直接看第三部分解决方案,复制粘贴代码即可. 一. ...
- 微信小程序iPhoneX 底部虚拟Home键区域适配方案
微信小程序iPhoneX 底部虚拟Home键区域适配方案 为什么要适配? 先看下iPhoneX和之前的iPhone的区别,如下图 可以看出主要是顶部和底部多了一些区域,如果页面内容进入该区域,有可能会 ...
- ios iphonex适配
一.前言 iOS11发布也有一段时间了,每次版本升级,相关的适配工作当然是下个版本的核心工作之一.而且这次iOS11的更新,相对于iOS10的更新来说,改动点还是比较多的.除了iOS11系统的更新之外 ...
- python壁纸超清全面屏_iOS 关于全面屏适配的方案及UI在不同尺寸下适配方案
iOS 关于全面屏适配的方案及UI在不同尺寸下适配方案 前言 全面屏刚出时,网上有说反人类.但过去这么久了,趋于技术的进步或看久了,大家也都慢慢习惯了(只是笔者还是买不起全面屏).官方适配中文版文档也 ...
- 苹果状态栏HTML,有关HTML5页面在iPhoneX适配问题
1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...
- 关于H5页面在iPhoneX适配(转)
1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...
- H5中 iphoneX适配
关于H5页面在iPhoneX适配 1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多 ...
最新文章
- ping: icmp open socket: Operation not permitted 的解决办法
- SQL2005 四个排名函数(row_number、rank、dense_rank和ntile)的比较
- Vue.js 生产环境部署
- AS打开速度慢,AS项目导入慢,新建项目导入慢
- C++动态数组(转)
- Leetcode: Validate Binary Search Tree
- 原生js cookie的使用实例setCookie()、getCookie()方法
- 我的飞鸽传书程序,很好!!!
- coco showanns不显示_coco奶茶加盟好不好?【5月官网最新公布】加盟费用+加盟流程...
- 11 旋转数组的最小数字
- MySQL存储过程(二)——存储过程基本使用
- 嵌入式开发之交叉编译工具链制作
- Android 自动点击工具,安卓自动点击器免费版
- c语言四个人中有一个人是小偷,涛涛学BASIC逻辑判断
- 亚马逊运营教程,三招学会亚马逊
- 博士申请 | 美国达特茅斯学院杨耀青老师招收深度学习方向全奖博士生
- jQuery 中console.log什么意思
- MATLAB--微分方程
- 西门子PLC快速查找数据算法
- 基于matlab模拟心电信号,附赠代码