Web App 一分钟适配 iPhone X

iPhone X 已经开抢了,然而面对 iPhone X 这个奇葩的屏幕,你准备好了吗?

因为 iPhone X 的刘海设计,Web 在 iPhone X 横屏时,可能会有这些问题:

  1. 默认情况,iPhone X 会将页面填充到安全区域(safe area),就像上面的图一样,一般情况下是没有问题的;
  2. 但如果是全屏 Web App 就会有问题了,比如背景色和页面的契合程度之类的;
  3. 有的 iOS app 内置 WKwebview 可能会为了避免一些bug,而采用统一的行为,就是禁用 iOS 11 自己的内容区域判断,从而让 H5 默认全屏,如下图:

解决方案

1. 默认全屏

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

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

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

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

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

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

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

原文发布于微信公众号 - Android机动车(JsAndroidClub)

原文发表时间:2017-10-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员宝库

神奇的选择器 :focus-within

有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类...

1042
来自专栏我分享我快乐

Adobe animate cc 界面解读

我们都知道Adobe animate cc 可帮助我们不用写代码的情况下完成简单的交互动效实现,但是对于初学者而言,英文界面成为想关注它的人望而却步。首先,我强...

44115
来自专栏Guangdong Qi

iOS开发常用之 HUD 弹窗

4242
来自专栏杨逸轩 ' sBlog

响应式Web设计技巧以及入门技巧

1328
来自专栏Python爬虫实战

数字华容道03:首页创建

整个布局采用 QVBoxLayout (竖型布局)。最上方的“数字华容道”字样是一张图片,采用QLabel进行展示。下面几个选择难度的按钮和排行榜按钮采用 QP...

802
来自专栏拂晓风起

HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

1、js配合传统css属性控制,可以使用setTimeout或者高级的requestAnimationFrame

2131
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native 开发适配心得

众所周知用React Native是可以开发跨平台的Android和iOS App。我们可以用React Native开发Android应用也可以开发iOS应用...

3635
来自专栏地方网络工作室的专栏

HTML5+CSS3 做一个灵动的动画 TAB 切换效果

HTML5+CSS3 做一个灵动的动画 TAB 切换效果 设计师给了一个 tab 切换的效果图。虽然是一个很小的功能,但是前端工程师在实现的时候还是有很多细节需...

40010
来自专栏二次元

CSS3随机背景图片切换特效

看大家扒我的幻想领域二次元限定版扒的比较累,扒了大半个小时的,抽空整理一下发出来

1413
来自专栏有趣的django

微信小程序实战–集阅读与电影于一体的小程序项目(三)

在文章详情页,点击播放音乐后,然后返回到文章列表页,再进到详情页,发现播放按钮是暂停状态,这是因为应用程序存在生命周期,下面就解决这个问题。

1933

扫码关注云+社区

领取腾讯云代金券