iPhone X适配方案

https://github.com/Wscats/iPhone-X

绝对长度单位

英寸 厘米 毫米 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

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">

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方向

还可以通过window.devicePixelRatio获取到当前设备的dpr

window.devicePixelRatio
机型 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">
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

分别表示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);

示例,比如下面是顶部导航条的适配,能让左上右都能出现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>

媒体查询

device-width 屏幕高(独立像素)
device-height 屏幕宽(独立像素)
-webkit-device-pixel-ratio dpr

注意-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;
}
}

参考文档

iPhone X适配参考文档

iPhone X适配方案的更多相关文章

  1. webapp:移动端高清、多屏适配方案(zz)

    来源: http://sentsin.com/web/1212.html 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉 ...

  2. 大屏iPhone的适配 +iOS 图片尺寸要求

    摘自:http://blog.ibireme.com/2014/09/16/adapted_to_iphone6/ 苹果公司官网设计介绍到:Retina显示屏的超高像素密度已超过人眼能分辨的范围.Re ...

  3. 移动端高清、多屏适配方案 [来源:http://div.io/topic/1092]

    Lovesueee 发布于 8 月前 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视 ...

  4. 小程序学习-iPhone X适配

    一.  安全区域(safe area) 与iPhone6/6s/7/8相比,iPhone X 无论是在屏幕尺寸.分辨率.甚至是形状上都发生了较大的改变,下面以iPhone 8作为参照物,先看看iPho ...

  5. 手淘H5移动端适配方案flexible源码分析

    移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...

  6. Web 端屏幕适配方案

    基础知识 像素相关 1.像素 :像素是屏幕显示最小的单位. 2.设备像素 :设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点. ...

  7. 翻屏类 h5 适配方案:解决宽高自适应难题

    表格 图片等 宽度自适应  :width:100%;  box-sizing: border-box; 基于淘宝适配方案flexible + 翻屏h5 适配方案adaptive flexible解读及 ...

  8. 适用于hips ui的iPhoneX及以上适配方案

    版本信息: hips ui: 0.1.43 须知: 随着hips ui的迭代,可能会解决适配问题,所以下面的方案是有时效性的. 如果你项目上很紧急,可以直接看第三部分解决方案,复制粘贴代码即可. 一. ...

  9. iPhone屏幕适配,历史及现状(http://hjcapple.github.io/2014/10/10/iphone-screen.html)

    iPhone屏幕适配,历史及现状 初代iPhone 2007年,初代iPhone发布,屏幕的宽高是320×480像素.下文也是按照宽度,高度的顺序排列.这个分辨率一直到iPhone 3GS的也保持不变 ...

随机推荐

  1. bat使用方法汇总

    前言 由于日常科研工作中使用C/C++比较多,在进行大规模运行时涉及到的批量处理操作较多,遂将目前遇到的情况记录如下,以便查看: 1.for循环 最基本的for循环操作为在一些数中遍历,如下例子.se ...

  2. 降维-基于RDD的API

    降维-基于RDD的API Singular value decomposition (SVD) Performance SVD Example Principal component analysis ...

  3. 基于TensorRT车辆实时推理优化

    基于TensorRT车辆实时推理优化 Optimizing NVIDIA TensorRT Conversion for Real-time Inference on Autonomous Vehic ...

  4. LED液晶与OLED:电视显示技术比较

    LED液晶与OLED:电视显示技术比较 LED LCD vs. OLED: TV display technologies compared 到目前为止,LED-LCD是主导的电视显示技术,特别是在等 ...

  5. Excel创建序列号1000个

    一.输入1,并且选择 二.开始-填充 三.选择序列 四.选择列-等差序列-步张值输入1 终止值输入1000 点击确定 五.查看结果,选中这一列 六.快捷键 Ctrl+下键 则跳转到最下方,上键则是最上 ...

  6. Java中List集合转Map集合报错:Duplicate key

    一.问题由来 最近生成环境刚发布了一个版本,本人负责优化的一个功能在进行测试时,报错了一个异常,duplicate key;去百度里面看了一下, 意思很明确就是建重复,而且错误是在Java代码中抛出来 ...

  7. 实验6、Flask API使用示例和拓展

    实验介绍 1. 实验内容 Flask 提供了多种API拓展,本节我们主要学习基于RESTful的Flask应用程序设计 2. 实验要点 学习和掌握多种RESTful的设计模式 3.实验环境 Cento ...

  8. MySQL的可重复读级别能解决幻读问题吗?

    之前在深入了解数据库理论的时候,了解到事务的不同隔离级别可能存在的问题.为了更好的理解所以在MySQL数据库中测试复现这些问题.关于脏读和不可重复读在相应的隔离级别下都很容易的复现了. 但是对于幻读, ...

  9. NOIP模拟测试3「序列·熟练剖分·建造游乐园(play)」

    ---恢复内容开始--- 序列 刚调出来样例就A了,假装是水题. 因为是乱序,我们要求出来每两项之间最小公比,而不是直接比 求出来每两项之间最小公比,然后扫一遍就完了.(还要注意重复情况) 那么问题就 ...

  10. Qt实现网络聊天室(客户端,服务端)

    1. 效果演示 客户端 服务器 连接成功之后 2. 预备知识 如果不知道网络编程的可以去看我的上一篇文章C++网络编程 在Qt中,实现网络编程的方式比用C++或C实现要方便简单许多,因为Qt已经替我们 ...