专栏首页腾讯NEXT学位让你的WEB和APP一分钟适配 iPhone X

让你的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. 默认全屏

<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  

竖屏时各值都是 0

但竖屏时需要特别留意

status-bar(44px) 和 home-indicator(34px)

完成以上操作

这样就能一分钟适配iPhoneX啦

是不是很简单

快行动起来让你WEB和APP走在时尚的前列线上


本文作者:掘金

原文链接:https://juejin.im/post/59f302eb518825550f53d839

本文分享自微信公众号 - 腾讯NEXT学位(NextDegree)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-10-27

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 用快速幂运算求斐波那契,时间复杂度降到O(logn)

    思路来自《挑战程序设计竞赛》 可运行的C++代码如下 #include <vector> #include <iostream> using namespace...

    kalifa_lau
  • iPhone 6S会带来新一代输入法吗?

    iOS每一次升级,App开发者都会如临大敌、严阵以待,以求App能够适配最新版iOS,各类应用纷纷较量谁是最先兼容iOS新版本的。9月16日被视作iOS史上最重...

    罗超频道
  • 为什么今年红包难抢了?插件!

    ©原创2015-02-18罗超 去年微信团队用10多天开发的红包风靡大江南北,成为现代人春节的一个新符号。虽然被支付宝、微博等玩家模仿但终究不及其里,微信红包依...

    罗超频道
  • 食物链POJ1182总结

    这道题是用并查集来解。并查集可以高效的查找某个元素是否属于一个集合。 敲代码过程中一次遇到了如下问题: new 的使用问题 想开辟一块放100个整形变量的空间...

    kalifa_lau
  • 升级,WIN10正在向Apple靠齐

    WIN10正式版终于来到了,4月开始我就在体验WIN10预览版了,还存在一些不完善之处,所以这次决定第一时间升级到正式版。WIN10这一次彻头彻尾的在改变自己,...

    罗超频道
  • 【2018秋招iOS面试总结】(渣渣本科生)

    本人是非985211学校,非计算机专业,技术一般,基础较差。 最开始秋招的时候,一线互联网基本上都投了,但是很多都被刷了,有的是刷了学校,有的是刷了四级(我四级...

    牛客网
  • iOS秋招总结 = 面经 + 闲言碎语 (不断更新)

    面经包含:携程、阿里、京东、腾讯 十一假期,秋招基本上已经结束了,剩下少量面试和少量流程中。虽然还没有最终决定,不过也还是决定来开个帖子,写一些总结回馈一下牛...

    牛客网
  • 互联网教育,扫地僧来了!

    这几天看到一份榜单,《2015年8月移动APP排行榜TOP200》,其排榜依据是App的月活跃用户数,即MOU。这份榜单上出现的App基本都有所耳闻,唯有一家叫...

    罗超频道
  • 与苹果斗争,可以不优雅,但要有用

    原创2015-03-26罗超 苹果一直顽固地控制着iPhone的用户体验,通过封闭的操作系统和中心化的分发机制,还有技术上著名的“沙盒机制”。这个机制下一个Ap...

    罗超频道
  • e学大HD版使用评测:突破用户体验瓶颈的平板应用

    K12教育大鳄学大教育进军在线教育之后可谓马不停蹄,不仅战略布局O2O初见成效,更是在近期对e学大智能平台进行了全面升级。以笔者而见,升级最大的亮点莫过于,e学...

    罗超频道

扫码关注云+社区

领取腾讯云代金券