├── css-shape-iphoneX ├── liu.png ├── test.css ├── iPhoneX4.html ├── iPhoneX5.html ├── iPhoneX.html ├── iPhoneX6.html ├── iPhoneX3.html └── iPhoneX2.html ├── .project ├── viewport-fit ├── contain │ └── index.html ├── cover │ ├── cover.html │ └── sefe-cover.html └── min-max │ └── index.html ├── readme.md └── test └── index.html /css-shape-iphoneX/liu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wscats/iPhone-X/HEAD/css-shape-iphoneX/liu.png -------------------------------------------------------------------------------- /css-shape-iphoneX/test.css: -------------------------------------------------------------------------------- 1 | /*iPhoneX的适配*/ 2 | 3 | @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { 4 | header { 5 | background-color: black; 6 | } 7 | } 8 | 9 | 10 | /*iPhone8P的适配*/ 11 | 12 | @media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) { 13 | header { 14 | background-color: deepskyblue; 15 | } 16 | } -------------------------------------------------------------------------------- /.project: -------------------------------------------------------------------------------- 1 | 2 | 3 | iphonex 4 | 5 | 6 | 7 | 8 | 9 | com.aptana.ide.core.unifiedBuilder 10 | 11 | 12 | 13 | 14 | 15 | com.aptana.projects.webnature 16 | 17 | 18 | 19 | 1510560264570 20 | 21 | 26 22 | 23 | org.eclipse.ui.ide.multiFilter 24 | 1.0-name-matches-false-false-node_modules 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /css-shape-iphoneX/iPhoneX4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 62 | 63 | 64 | 65 |
66 | 头部 67 |
68 | 105 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /viewport-fit/contain/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 81 |
82 | Blog 83 | Photos 84 | Projects 85 |
86 |
87 |

Welcome

88 |

two hours ago

89 |

Hi!

90 |

Welcome to my sample blog!

91 |

This post is here to help demonstrate how easy it is to take an existing site, along with full-width bars and fixed-position elements, and make it take full advantage of iPhone X's edge-to-edge display.

92 |

The actual post describing how to adopt the new API is over on the 93 | WebKit blog.

94 |

There, you will learn all about new WebKit features, including viewport-fit, constant(), safe area insets, and min() and max().

95 |

I hope that it helps you adopt these new features in your websites.

96 |
97 |
98 | About Me 99 | Contact 100 | Site Map 101 |
102 | 103 | 104 | -------------------------------------------------------------------------------- /viewport-fit/cover/cover.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Designing Websites for iPhone X: Using the whole screen 7 | 77 | 78 | 79 | 80 |
81 | Blog 82 | Photos 83 | Projects 84 |
85 |
86 |

Welcome

87 |

two hours ago

88 |

Hi!

89 |

Welcome to my sample blog!

90 |

This post is here to help demonstrate how easy it is to take an existing site, along with full-width bars and fixed-position elements, and make it take full advantage of iPhone X's edge-to-edge display.

91 |

The actual post describing how to adopt the new API is over on the 92 | WebKit blog.

93 |

There, you will learn all about new WebKit features, including viewport-fit, constant(), safe area insets, and min() and max().

94 |

I hope that it helps you adopt these new features in your websites.

95 |
96 |
97 | About Me 98 | Contact 99 | Site Map 100 |
101 | 102 | 103 | -------------------------------------------------------------------------------- /css-shape-iphoneX/iPhoneX5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 77 | 78 | 79 | 80 |
81 | 头部 82 |
83 | 120 | 123 | 124 | 125 | -------------------------------------------------------------------------------- /viewport-fit/cover/sefe-cover.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Designing Websites for iPhone X: Respecting the safe areas 7 | 83 | 84 | 85 | 86 |
87 | Blog 88 | Photos 89 | Projects 90 |
91 |
92 |

Welcome

93 |

two hours ago

94 |

Hi!

95 |

Welcome to my sample blog!

96 |

This post is here to help demonstrate how easy it is to take an existing site, along with full-width bars and fixed-position elements, and make it take full advantage of iPhone X's edge-to-edge display.

97 |

The actual post describing how to adopt the new API is over on the 98 | WebKit blog.

99 |

There, you will learn all about new WebKit features, including viewport-fit, constant(), safe area insets, and min() and max().

100 |

I hope that it helps you adopt these new features in your websites.

101 |
102 |
103 | About Me 104 | Contact 105 | Site Map 106 |
107 | 108 | 109 | -------------------------------------------------------------------------------- /css-shape-iphoneX/iPhoneX.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 40 | 41 | 42 | 43 |
44 | 45 | 46 |
47 | 73 |
74 |
75 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /viewport-fit/min-max/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Designing Websites for iPhone X: min() and max() 7 | 90 | 91 | 92 | 93 |
94 | Blog 95 | Photos 96 | Projects 97 |
98 |
99 |

Welcome

100 |

two hours ago

101 |

Hi!

102 |

Welcome to my sample blog!

103 |

This post is here to help demonstrate how easy it is to take an existing site, along with full-width bars and fixed-position elements, and make it take full advantage of iPhone X's edge-to-edge display.

104 |

The actual post describing how to adopt the new API is over on the 105 | WebKit blog.

106 |

There, you will learn all about new WebKit features, including viewport-fit, constant(), safe area insets, and min() and max().

107 |

I hope that it helps you adopt these new features in your websites.

108 |
109 |
110 | About Me 111 | Contact 112 | Site Map 113 |
114 | 115 | 116 | -------------------------------------------------------------------------------- /css-shape-iphoneX/iPhoneX6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 87 | 88 | 89 | 90 |
91 | 头部 92 |
93 | 130 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /css-shape-iphoneX/iPhoneX3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 45 |
46 | 47 |
48 | 49 | 83 |
84 | 125 | 126 | 127 | 128 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # 绝对长度单位 2 | 3 | |英寸|厘米|毫米|磅|pc| 4 | |-|-|-|-|-| 5 | |inch|cm|mm|pt|pica| 6 | 7 | # 相对长度单位 8 | 9 | 是网页设计中使用最多的长度单位,包括`px、em、rem`等 10 | 11 | # 屏幕尺寸 12 | 13 | ![image](https://user-images.githubusercontent.com/17243165/32698819-74cb03ca-c7e6-11e7-817f-408337368032.png) 14 | 15 | 16 | 17 | > 指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米 18 | 19 | |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| 20 | |-|-|-|-|-|-|-|-|-| 21 | |3.5英寸|4英寸|4.7英寸|5.5英寸|4.7英寸|5.5英寸|4.7英寸|5.5英寸|5.8英寸| 22 | 23 | # 屏幕分辨率 24 | 25 | 指在横纵向上的像素点数,单位是**px**,1px=1个像素点。一般以`纵向像素*横向像素`来表示一个手机的分辨率,如1960*1080(这里的1像素指的是物理设备的1个像素点) 26 | 27 | |机型|分辨率|机型|分辨率|机型|分辨率| 28 | |-|-|-|-|-|-| 29 | |iPhone 4/4S|960*640|iPhone 6S Plus|1920*1080|iPhone 8 Plus|1920*1080| 30 | |iPhone 5/5S|1136*640|iPhone 7|1334*750|iPhone X|2436*1125| 31 | |iPhone SE|1136*640|iPhone 7 Plus|1920*1080||| 32 | |iPhone 6/6S|1334*750|iPhone 8|1334*750||| 33 | 34 | # 屏幕像素密度 35 | 36 | ![image](https://user-images.githubusercontent.com/17243165/32698749-8733c61a-c7e5-11e7-8e89-6f7198f26e25.png) 37 | 38 | 屏幕上每英寸可以显示的像素点的数量,单位是**ppi**,即**pixels per inch**的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关,在单一变化条件下,屏幕尺寸越小、分辨率越高,像素密度越大,反之越小 39 | 40 | 41 | ![image](https://user-images.githubusercontent.com/17243165/32697840-3ad2f360-c7d4-11e7-9c99-de829a35da6e.png) 42 | 43 | - 屏幕上勾股定理算出对角线的分辨率:**√(1920²+1080²)≈2203px** 44 | - 对角线分辨率除以屏幕尺寸:**2203/5≈440dpi** 45 | 46 | ```js 47 | 1920^2 + 1080^2 ≈ 2203^2 //3686400 + 1166400 = 4852800 48 | 2203 / 5 ≈ 440 49 | ``` 50 | 51 | # PPI与DPI 52 | 53 | ![image](https://user-images.githubusercontent.com/17243165/32707813-70d66130-c861-11e7-9dec-04eb87490448.png) 54 | 55 | PPI(Pixel Per Inch by diagonal):表示沿着对角线,每英寸所拥有的像素(Pixel)数目 56 | PPI数值越高,代表显示屏能够以越高的密度显示图像,即通常所说的分辨率越高、颗粒感越弱 57 | 58 | |ppi与dpi|描述| 59 | |-|-| 60 | |ppi|`pixels per inch`,屏幕上每英寸可以显示的像素点的数量,即屏幕像素密度| 61 | |dpi|`dots per inch`,最初用于衡量打印物上每英寸的点数密度,就是打印机可以在一英寸内打多少个点。当dpi的概念用在计算机屏幕上时,就称之为ppi。ppi和dpi是同一个概念,Android比较喜欢使用dpi,IOS比较喜欢使用ppi| 62 | 63 | # Viewport 64 | 65 | 移动端开发中,通常我们都会采用`meta`标签设置`viewport` 66 | ```html 67 | 68 | ``` 69 | ## viewport是什么? 70 | 71 | ![image](https://user-images.githubusercontent.com/17243165/32706923-687a642e-c85b-11e7-80f5-17c77624b6ff.png) 72 | 73 | 通俗来讲,移动端的viewport就是我们所能看到的手机端浏览器的可视窗口大小,但viewport又不仅仅局限于可视窗口的大小,一般情况下,它是比默认窗口大小要大的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动端正常显示为桌面浏览器而设计的网页,移动端的浏览器都会默认把自己的默认的viewport设为980px到1024px不等,但其后果就是会出现横向滚动条,因为移动端浏览器可视区域的大小是比默认的viewport宽度要小的 74 | 75 | |参数|描述| 76 | |-|-| 77 | |width|设置layout viewport的宽度,为一个正整数,或字符串"device-width"| 78 | |initial-scale|设置页面的初始缩放值,为一个数字,可以带小数| 79 | |minimum-scale|允许用户的最小缩放值,为一个数字,可以带小数| 80 | |maximum-scale|允许用户的最大缩放值,为一个数字,可以带小数| 81 | |height|设置layout viewport  的高度,这个属性对我们并不重要,很少使用| 82 | |user-scalable|是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许| 83 | 84 | ## 不同的设备对1px有不一样的定义 85 | 86 | 在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中,我们无需对这个津津计较,但在移动设备上,必须弄明白这点。在早先的移动设备中,屏幕像素密度都比较低,如iphone3,它的分辨率为320x480,在iphone3上,一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展,移动设备的屏幕像素密度越来越高,从iphone4开始,苹果公司便推出了所谓的Retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的。 87 | 88 | 89 | 在移动端浏览器中以及某些桌面浏览器中,window对象有一个devicePixelRatio属性,它的官方的定义为:设备物理像素和设备独立像素的比例,也就是`devicePixelRatio = 物理像素 / 独立像素`。css中的px就可以看做是设备的独立像素,所以通过devicePixelRatio,我们可以知道该设备上一个css像素代表多少个物理像素。例如,在Retina屏的iphone上,devicePixelRatio的值为2,也就是说1个css像素相当于2个物理像素 90 | 91 | 其实就是移动端和PC端的px是不同的,移动端的屏幕可视区域(viewport)小但像素多,所以跟PC相比的每个独立像素点的物理像素是多的,也就是移动端物理像素更密集,所以更PC的独立像素有`dp`的倍数转换 92 | 93 | 在进行具体的分析之前,首先得知道下面这些关键性基本概念(术语)。 94 | 95 | ## 物理像素(physical pixel) 96 | 97 | 一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值。 98 | 99 | ## 设备独立像素(density-independent pixel) 100 | 101 | 设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素。 102 | 103 | 所以说,物理像素和设备独立像素之间存在着一定的对应关系,这就是接下来要说的设备像素比。 104 | 105 | ## 设备像素比(device pixel ratio ) 106 | 107 | 设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系,它的值可以按如下的公式的得到: 108 | ```html 109 | 设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上,x方向或者y方向 110 | ``` 111 | 还可以通过window.devicePixelRatio获取到当前设备的dpr 112 | ```js 113 | window.devicePixelRatio 114 | ``` 115 | 116 | |机型|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| 117 | |-|-|-|-|-|-|-|-|-|-|-| 118 | |屏幕尺寸|3.5英寸|3.5英寸|4英寸|4.7英寸|5.5英寸|4.7英寸|5.5英寸|4.7英寸|5.5英寸|5.8英寸| 119 | |独立像素(CSS像素)|480*320|480*320|568*320|667*375|736*414|667*375|736*414|667*375|736*414|812*375| 120 | |物理像素(分辨率)|480*320|960*640|1136*640|1334*750|1920*1080(2208x1242)|1334*750|1920*1080|1334*750|1920*1080|2436*1125| 121 | |ppi/dpi(像素密度)|163|326|326|326|401|326|401|326|401|458| 122 | |dpr(倍图)|1|2|2|2|3(2.5)|3|3|3|3|3(2.9)| 123 | 124 | 如果APP要同时兼容iPhone3GS~iPhone6+,则需要提供icon.png/icon@2x.png/icon@3x.png三种分辨率的图片 125 | 126 | 在Android中,规定以160dpi为基准,1dp=1px。如果密度是320dpi,则1dp=2px,以此类推 127 | 128 | 2K分辨率指的是屏幕分辨率达到了一种级别,指屏幕横向像素达到2000以上(iPhone X是2K屏) 129 | 130 | # iPhoneX的适配 131 | 132 | ## background-color 133 | 134 | 如果网页设置了一个背景颜色,那么最简单解决方案是,在body节点设置`background-color`,使背景颜色填充整个屏幕,从而解决横屏显示左右白边的问题 135 | 136 | ## viewport-fit 137 | ```html 138 | 139 | 140 | 141 | 142 | 143 | 144 | ``` 145 | 146 | |viewport-fit|描述|示例|示例|示例| 147 | |-|-|-|-|-| 148 | |auto/contain|默认值,页面内容显示在`safe area`内|[示例1](https://wscats.github.io/iPhone-X/viewport-fit/contain/)||| 149 | |cover|页面内容充满屏幕|[示例1](https://wscats.github.io/iPhone-X/viewport-fit/cover/cover.html)|[示例2](https://wscats.github.io/iPhone-X/viewport-fit/cover/sefe-cover.html)|[示例3](https://wscats.github.io/iPhone-X/viewport-fit/min-max/)| 150 | |横屏列表侧刘海|横屏下列表环绕刘海|[示例1](https://wscats.github.io/iPhone-X/css-shape-iphoneX/iPhoneX3.html)| 151 | 152 | 设置auto前 153 | ![image](https://user-images.githubusercontent.com/17243165/32718857-6d1c3b0e-c899-11e7-9b70-7bb980cd022d.png) 154 | 设置cover后 155 | ![image](https://user-images.githubusercontent.com/17243165/32718849-6434b66a-c899-11e7-893d-8eb05d2615c6.png) 156 | 157 | ## safe-area-inset-* 158 | 159 | 在设置`viewport-fit=cover`之后,Web中会新增四个常量 160 | ```css 161 | safe-area-inset-top 162 | safe-area-inset-right 163 | safe-area-inset-left 164 | safe-area-inset-bottom 165 | ``` 166 | 分别表示safe area和可视窗口viewport顶部,右边,左边,底部的间距,可以用于设置margin和padding或者绝对定位时left和top 167 | 168 | > 注意:在横屏和竖屏状态下,safe-area-inset-*的值不同 169 | 170 | ![image](https://user-images.githubusercontent.com/17243165/32719209-85d21f00-c89a-11e7-820c-60c9f15651d4.png) 171 | 172 | 为了解决应用`viewport-fit=cover`之后,有些显示内容被裁剪的问题,我们可以通过添加边距使得网页主要内容处于safe area中不被裁剪,解决方式如下 173 | 174 | ```css 175 | padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left); 176 | ``` 177 | ![image](https://user-images.githubusercontent.com/17243165/32719362-12474910-c89b-11e7-82a0-6a8a9c7c32d7.png) 178 | 179 | 示例,比如下面是顶部导航条的适配,能让左上右都能出现padding来让元素保留在安全区域以内 180 | 181 | 总结为,我们可以利用`safe-area-inset-*`做以下适配,详细请看[DEMO](https://wscats.github.io/iPhone-X/css-shape-iphoneX/iPhoneX5.html) 182 | 183 | - 竖屏下,对底部做`padding-bottom: constant(safe-area-inset-bottom);`,其他设置是无意义的 184 | - 横屏下,对底部设置左,下,右的`safe-area-inset-*`,对头部设置左和右的`safe-area-inset-*`,其他设置也是无意义的 185 | 186 | ```html 187 |
头部
188 | 210 | ``` 211 | 212 | ## 媒体查询 213 | 214 | ||| 215 | |-|-| 216 | |device-width|屏幕高(独立像素)| 217 | |device-height|屏幕宽(独立像素)| 218 | |-webkit-device-pixel-ratio|dpr| 219 | 220 | 注意`-webkit-device-pixel-ratio`必须加前缀,否则无效 221 | ```css 222 | /*iPhoneX的适配*/ 223 | @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { 224 | header { 225 | background-color: black; 226 | } 227 | } 228 | /*iPhone8P的适配*/ 229 | @media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) { 230 | header { 231 | background-color: deepskyblue; 232 | } 233 | } 234 | ``` 235 | 236 | # 参考文档 237 | 238 | - [移动端高清、多屏适配方案](http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041) 239 | - [手淘移动端适配的方案学习和相关思考](http://blog.csdn.net/liujie19901217/article/details/51982403) 240 | - [手淘适配方案lib-flexible](https://github.com/amfe/lib-flexible) 241 | 242 | # iPhone X适配参考文档 243 | - [iPhone X的Web设计](https://www.w3cplus.com/mobile/designing-websites-for-iphone-x.html) 244 | - [剖析 iOS 11 网页适配问题](https://objcer.com/2017/09/21/Understanding-the-WebView-Viewport-in-iOS-11-iPhone-X/) 245 | - [关于H5页面在iPhoneX适配](https://www.cnblogs.com/lolDragon/p/7795174.html) 246 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 19 | 20 | 21 |
22 |
23 |
24 | 选项一 25 |
26 |
27 | 选项二 28 |
29 |
30 | 选项三 31 |
32 |
33 |
34 | 236 |
237 |
238 | 239 | 240 | 241 | 8 242 | 243 |

微信

244 |
245 | 246 | 247 |

通讯录

248 |
249 | 250 | 251 | 252 | 253 | 254 |

发现

255 |
256 | 257 | 258 |

259 |
260 |
261 |
262 | 263 | 264 | -------------------------------------------------------------------------------- /css-shape-iphoneX/iPhoneX2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 31 | 32 | 33 |
34 |
35 | 137 |
138 | 139 | 161 | 162 | --------------------------------------------------------------------------------