iphone刘海屏页面适配

1. 下面是实现iphonex 刘海屏前端页面适配的一个插值算法小案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body, ul {margin: 0;}ul {padding-left: 10px;}li {list-style: none;}.phone {position: relative;width: 600px;height: 300px;border: 10px solid #000;border-radius: 30px;margin: 100px auto 0;}.content, .content ul {width: 100%;height: 100%;}.content {overflow-x: hidden;overflow-y: scroll;}.camera {position: absolute;top: 60px;left: 0;width: 26px;height: 180px;background-color: black;border-radius: 0 30px 30px 0;}li + li {border-top: 1px solid #ccc;}li {font-size: 16px;padding: 5px;}*::-webkit-scrollbar {padding-left: 100px;}</style>
</head>
<body>
<div class="phone"><div class="content"><ul><li>SweeTango</li><li>Pacific Rose</li><li>SnapDragon</li><li>Envy</li><li>Koru (Plumac)</li><li>Pink Lady (Cripps Pink)</li><li>HoneYcrisp</li><li>Hoyal Gala</li><li>Macoun</li><li>SweeTango</li><li>Pacific Rose</li><li>SnapDragon</li><li>Envy</li><li>Koru (Plumac)</li><li>Pink Lady (Cripps Pink)</li><li>HoneYcrisp</li><li>Hoyal Gala</li><li>Macoun</li><li>Macoun</li><li>SweeTango</li><li>Pacific Rose</li><li>SnapDragon</li><li>Envy</li><li>Koru (Plumac)</li><li>Pink Lady (Cripps Pink)</li><li>HoneYcrisp</li><li>Hoyal Gala</li><li>Macoun</li><div class="camera"></div></ul></div>
</div>
<script>~~function () {var thresh = 20;var maxoffset = 50;var aLi = document.querySelectorAll('li');var oCamera = document.querySelector('.camera');var oContent = document.querySelector('.content')var camPs = oCamera.getBoundingClientRect();~~function () {oContent.onscroll = arguments.callee;for (var item of aLi) {var itemRect = item.getBoundingClientRect();var dtf = itemRect.bottom - camPs.topvar dtb = itemRect.bottom - camPs.bottomif (Math.abs(dtf) < 20) {item.style.transform = 'translateX(' + lerp(0, 30, cal(dtf, 20)) + "px)";} else if (dtf > 20 && dtb < -20) {item.style.transform = 'translateX(' + 30 + "px)";} else if (Math.abs(dtb) <20) {item.style.transform = 'translateX(' + lerp(30, 0, cal(dtb, 20)) + "px)";} else {//全部移除摄像头区域item.style.transform = 'translateX(' + 0 + "px)";}}}()}()/*** @param 插值算法* @param p1  初始化状态* @param p2  结束状态* @param t   时间函数 (0-100%)** 返回p1 到 p2 之间的值*/function lerp(p1, p2, t) {return (p2 - p1) * t + p1}function cal(dis, thr) {return (dis + thr) / (thr * 2)}
</script>
</body>
</html>

iphone刘海屏页面适配相关推荐

html刘海屏高度,iphone刘海屏网页适配方法
1. 下面是实现iphonex 刘海屏前端网页适配的一个插值算法小案例 Title body, ul { margin: 0; } ul { padding-left: 10px; } li { li ...
《转》安卓P 刘海屏的适配
安卓P版本也就是刚发布的安卓9.0 其中就加入了刘海屏相关的API.其相关行为与功能变更也是非常多的,从其变更的趋势及功能来看,google在进一步的收紧权限. 其P版本变更行为中就加入了对非SDK接 ...
Android P （9.0）刘海屏(DisplayCutout)适配方法
简介 Android P版本提供了统一的刘海屏方案和三方适配刘海屏方案: 对于有状态栏的页面,不会受到刘海屏特性的影响全屏显示的页面,系统刘海屏方案会对应用界面做下移处理,避开刘海区显示已经适配A ...
iPhoneX（刘海屏）适配
iPhoneX(刘海屏)适配在 iOS11的时候,苹果破天荒发布了一款新屏幕样式的手机,俗称刘海屏.世人皆道丑,而后纷纷买之.自此,iOS 开发者们也走向了 iPhoneX系列的适配之旅. 区别状 ...
android刘海屏高度适配,Android刘海屏的适配
这里主要是介绍一下Android P中刘海屏的适配以及Android P之前的适配.为什么要分开呢?因为Android P之前官方还没提供API来进行适配,都是由各家厂商来提供适配方案的. 1.And ...
Android 刘海屏的适配
1.Android8.0以上的适配说明主要说明国内外几大主流产商:小米.oppo.vivo.华为.三星.Google. 小米 MIUI Notch 屏适配说明 Notch 机型在界面上会带来两个问题 ...
安卓P 刘海屏的适配
安卓P版本也就是刚发布的安卓9.0 其中就加入了刘海屏相关的API.其相关行为与功能变更也是非常多的,从其变更的趋势及功能来看,google在进一步的收紧权限. 其P版本变更行为中就加入了对非SDK接 ...
移动端 H5 分屏页面适配问题--设计稿比例与设备宽高比例不同
移动端 H5 分屏页面适配问题单位问题肯定用rem, 为了方便计算,一般取 1rem=100px(设计稿px), 需要根据设计稿的宽度设置合适的fontSize, 具体可以看这篇文章 :移动端根据 ...
ios 判断手机角度_IOS 判断iPhone刘海屏
如今Apple市场上,愈来愈流行刘海屏手机(与Android市场同样,往刘海屏手机方向发展趋势).windows 在iPhone手机角度上看,刘海屏出如今机型较新的手机上(相对较旧/老的iPhone上 ...

iphone刘海屏页面适配

iphone刘海屏页面适配相关推荐

最新文章

热门文章