新闻动态
行业资讯
签约信息
公司信息

【app那些事】【网页设计】web app如何适应IphoneX流海 一分钟适配 iPhone X

 发布时间:2018-06-12     浏览次数:2173     作者:斑驴互联

解决方案

1. 默认全屏

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

在 viewport 的 meta 属性中,添加 viewport-fit=cover 即可。

viewport-fit 默认值为 auto/contain,全屏值为cover,是不是感觉很熟悉?嗯,和 background-size 以及 object-fit 一样的。

2. 设置页面边距为安全区域边距

body{  
    padding: 
        constant(safe-area-inset-top) 
        constant(safe-area-inset-right) 
        constant(safe-area-inset-bottom) 
        constant(safe-area-inset-left);  
}

嗯,constant() 以及 safe-area-inset-top safe-area-inset-right safe-area-inset-bottom safe-area-inset-left 是 iOS 11 webview 新增加的特性,专门用于应对刘海的。。。

当然,这里的padding只是用于匹配iPhone X默认的安全区域的,你可以设置任何值,不过建议要不小于默认的安全区域值。

当前版本,横屏时,各属性的值

safe-area-inset-top = 0  safe-area-inset-right = 44px  
safe-area-inset-bottom = 21px  
safe-area-inset-left = 44px

http://banlvit.com/uploads/20180612/e408646c98239b53ac469422aa8d3bf9.png

竖屏时各值都是 0,但竖屏时需要特别留意 status-bar(44px) 和 home-indicator(34px)。

源文链接:请点这里访问


标签: 前端观察 网页设计 南昌网站建设 网站制作 网站建设 南昌网站开发 app开发 微信小程序

每个作品都是一次思维与灵魂的碰撞
斑驴互联在南昌一直向着“做业内一流互联网设计团队”这一愿景努力,不断提升对网站高端设计,微信公众号/小程序开发等产品的用户体验
400 0791 158