一、解决iphonX白条,网站扩展到整个屏幕
方法一：设置body的背景色：
.body{
background-color：#f00;
}
方法二：添加mate属性viewport-fit=cover
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
contain：视口完全包括网页内容，这意味着fixed定位的元素被包含在了iOS 11的安全区内
cover：网页内容完全覆盖视口，这意味着fixed定位的元素将被固定到视口，即它们也可能会被覆盖，这恢复了我们在ios 10上的行为
auto：默认值，和contain相同
方法三：设置safe-srea-inset-*确保安全边界
.page{
padding-top: constant(safe-area-inset-top);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
padding-left: constant(safe-area-inset-left);
}
二、实现元素滚动自动环绕iPhone X"刘海"
1.环绕齐刘海滚动实现原理
/* 关键字值 */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;
/* 函数值 */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
/* <url>值 */
shape-outside: url(image.png);
/* 渐变值 */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
.shape {
float: left;
shape-outside: polygon(0 0, 0 150px, 16px 154px, 30px 166px, 30px 314px, 16px 326px, 0 330px, 0 0);
}
box.addEventListener('scroll', function () {
var scrollTop = box.scrollTop;
// 滚动偏移应用在shape-outside上
shape.style.shapeOutside = 'polygon(0 0, 0 '+ (150 + scrollTop) +'px, 16px '+ (154 + scrollTop) +'px, 30px '+ (166 + scrollTop) +'px, 30px '+ (314 + scrollTop) +'px, 16px '+ (326 + scrollTop) +'px, 0 '+ (330 + scrollTop) +'px, 0 0)';
});
2.CSS Shapes环绕iPhone X刘海的其它更简易方法
.shape {
float: left;
shape-outside: url(liu-outside.png);
margin-top: 150px;
}
box.addEventListener('scroll', function () {
var scrollTop = box.scrollTop;
// 滚动偏移应用在margin-top上
shape.style.marginTop = (150 + scrollTop) + 'px';
});
服务热线 19970861797
