├── 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 |
68 |
69 | 第一条
70 | 第一条
71 | 第一条
72 | 第一条
73 | 第一条
74 | 第一条
75 | 第一条
76 | 第一条
77 | 第一条
78 | 第一条
79 | 第一条
80 | 第一条
81 | 第一条
82 | 第一条
83 | 第一条
84 | 第一条
85 | 第一条
86 | 第一条
87 | 第一条
88 | 第一条
89 | 第一条
90 | 第一条
91 | 第一条
92 | 第一条
93 | 第一条
94 | 第一条
95 | 第一条
96 | 第一条
97 | 第一条
98 | 第一条
99 | 第一条
100 | 第一条
101 | 第一条
102 | 第一条
103 | 第一条
104 |
105 |
108 |
109 |
110 |
--------------------------------------------------------------------------------
/viewport-fit/contain/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
81 |
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 |
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 |
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 |
101 |
102 |
103 |
--------------------------------------------------------------------------------
/css-shape-iphoneX/iPhoneX5.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
77 |
78 |
79 |
80 |
83 |
84 | 第一条
85 | 第一条
86 | 第一条
87 | 第一条
88 | 第一条
89 | 第一条
90 | 第一条
91 | 第一条
92 | 第一条
93 | 第一条
94 | 第一条
95 | 第一条
96 | 第一条
97 | 第一条
98 | 第一条
99 | 第一条
100 | 第一条
101 | 第一条
102 | 第一条
103 | 第一条
104 | 第一条
105 | 第一条
106 | 第一条
107 | 第一条
108 | 第一条
109 | 第一条
110 | 第一条
111 | 第一条
112 | 第一条
113 | 第一条
114 | 第一条
115 | 第一条
116 | 第一条
117 | 第一条
118 | 第一条
119 |
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 |
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 |
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 |
48 | 为何 我还没有开始就有
49 | 好似与生俱来的 我不是非酋
50 | 别说 我没有太多借口
51 | 我也不会轻言放手 我不享受这种特有
52 | 谁说天生幸运就应该被唾弃着
53 | 我后天努力来超越先前进的
54 | 特权在我的手里hater在眼气呢
55 | 看我上升到天际来看嘲笑我的
56 | 我说hold on hold on 想灭掉我的慢着
57 | 在追赶我的路上 空间还有很大呢
58 | 我就是欧皇 来让你紧张
59 | 我就像人民币的玩家永远猖狂
60 | 为何 我还没有开始就有
61 | 好似与生俱来的 我不是非酋
62 | 别说 我没有太多借口
63 | 我也不会轻言放手 我不享受这种特有
64 | 谁说天生幸运就应该被唾弃着
65 | 我后天努力来超越先前进的
66 | 特权在我的手里hater在眼气呢
67 | 看我上升到天际来看嘲笑我的
68 | 我说hold on hold on 想灭掉我的慢着
69 | 在追赶我的路上 空间还有很大呢
70 | 我就是欧皇 来让你紧张
71 | 我就像人民币的玩家永远猖狂
72 |
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 |
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 |
114 |
115 |
116 |
--------------------------------------------------------------------------------
/css-shape-iphoneX/iPhoneX6.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
87 |
88 |
89 |
90 |
93 |
94 | 第一条
95 | 第一条
96 | 第一条
97 | 第一条
98 | 第一条
99 | 第一条
100 | 第一条
101 | 第一条
102 | 第一条
103 | 第一条
104 | 第一条
105 | 第一条
106 | 第一条
107 | 第一条
108 | 第一条
109 | 第一条
110 | 第一条
111 | 第一条
112 | 第一条
113 | 第一条
114 | 第一条
115 | 第一条
116 | 第一条
117 | 第一条
118 | 第一条
119 | 第一条
120 | 第一条
121 | 第一条
122 | 第一条
123 | 第一条
124 | 第一条
125 | 第一条
126 | 第一条
127 | 第一条
128 | 第一条
129 |
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 |
50 | a11111111111111111111111111
51 | b11111111111111111111111111
52 | 11111111111111111111111111
53 | 11111111111111111111111111
54 | 11111111111111111111111111
55 | 11111111111111111111111111
56 | 11111111111111111111111111
57 | 11111111111111111111111111
58 | 11111111111111111111111111
59 | 11111111111111111111111111
60 | 11111111111111111111111111
61 | 11111111111111111111111111
62 | 11111111111111111111111111
63 | 11111111111111111111111111
64 | 11111111111111111111111111
65 | 11111111111111111111111111
66 | 11111111111111111111111111
67 | 11111111111111111111111111
68 | 11111111111111111111111111
69 | 11111111111111111111111111
70 | 11111111111111111111111111
71 | 11111111111111111111111111
72 | 11111111111111111111111111
73 | 11111111111111111111111111
74 | 11111111111111111111111111
75 | 11111111111111111111111111
76 | 11111111111111111111111111
77 | 11111111111111111111111111
78 | 11111111111111111111111111
79 | 11111111111111111111111111
80 | 11111111111111111111111111
81 | 11111111111111111111111111
82 |
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 | 
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 | 
37 |
38 | 屏幕上每英寸可以显示的像素点的数量,单位是**ppi**,即**pixels per inch**的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关,在单一变化条件下,屏幕尺寸越小、分辨率越高,像素密度越大,反之越小
39 |
40 |
41 | 
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 | 
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 | 
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 | 
154 | 设置cover后
155 | 
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 | 
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 | 
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 |
35 |
36 |
37 |
表单
38 |
39 |
40 |
74 |
75 |
76 |
77 |
基础组件
78 |
79 |
80 |
150 |
151 |
152 |
153 |
操作反馈
154 |
155 |
156 |
190 |
191 |
192 |
193 |
导航相关
194 |
195 |
196 |
212 |
213 |
214 |
215 |
搜索相关
216 |
217 |
218 |
228 |
229 |
230 |
231 |
层级规范
232 |
233 |
234 |
235 |
236 |
237 |
261 |
262 |
263 |
264 |
--------------------------------------------------------------------------------
/css-shape-iphoneX/iPhoneX2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
31 |
32 |
33 |
138 |
139 |
161 |
162 |
--------------------------------------------------------------------------------