iPhoneX横屏下的列表兼容

[Wscats]

模拟iPhone的刘海界面

新建html，添加头部meta标签，定义viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

定义页面的样式

* {
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100%;
}

#content {
	height: 100%;
	overflow: auto;
}
//这一个是定义刘海的关键样式
#liuhai {
	width: 30px;
	height: 320px;
	clip-path: polygon(0 0, 30px 30px, 30px 200px, 0 230px);
	background-color: #A4F4B0;
	shape-outside: polygon(0 0, 30px 30px, 30px 200px, 0 230px);
	float: left;
}

页面拥有一个刘海，和一个滚动列表

<div id="content">
	<!--刘海-->
	<div id="liuhai"></div>
	<!--列表-->
	<ul>
		<li>wscats</li>
                <!--这里省略多个li->
                <li>wscats</li>
	</ul>
</div>

clip-path

clip-path绘制图形

clip-path: polygon(0 0, 30px 30px, 30px 200px, 0 230px);

polygon接受四个坐标点（八个参数），定义了每一个点的坐标，从上图也能看出，起点是从左上角开始计算的，可以用百分比，也可以用px等单位

上面设置的第一个点位置为x:0,y:0，第二个点的位置为x:30px,y:30px，第三个点的位置为x:30px,y:200px，最后一个点位置为x:0,y:230px，最后自动闭合成一个类似iPhoneX刘海的矩形。

shape-outside

让clip-path所绘制图形占用空间，会挤开其他元素

一切无误后，得到视图如下

控制刘海的位置

这里要讲将刘海位置从屏幕左上方移动到屏幕中间，实现原理是用JS计算刘海居中时候距离屏幕两侧的距离然后重新进行定位