ios11WebView Viewport 适配须知

iOS 11在状态栏区域带来了一些新的,也许是不直观的行为, 这对使用Apache Cordova或Ionic等工具的开发人员来说尤其重要。 尤其是,这种行为上的变化会影响任何基于Web的应用程序,

这些应用程序在为iOS 11构建时使用固定位置标题栏。本文帮助您了解iOS 11中的Webview视口。

注意:现有的应用程序将继续工作,因为它们始终没有改变其视口的行为。 这只会影响用Xcode 9编译的应用程序和iOS 11的目标。

为了理解这个变化,我们需要看看它的上下文。

状态栏和安全区域

在iOS的早期版本中,状态栏是横跨屏幕顶部的一个恒定的黑条,基本上是不可触摸的。这是一个系统用户界面,你的应用程序运行在它下面的空间。

随着iOS 7的推出而改变,iOS 7的透明状态栏采用了应用程序导航栏的颜色。对于在像Cordova这样的webview中显示的应用程序,这通常意味着检测iOS版本,并将20像素的填充添加到固定标题的顶部,以便正确填充空格。

较新版本的iOS引入了一些小修改,包括在通话时状态栏中显示额外横幅或在后台使用地理定位的功能。

在本机方面,很多这些都是由UINavigationBar和自动布局指南自动处理的。屏幕顶部和底部有布局指南,自动调整到状态栏的正确高度,确保应用内容处于状态栏不会遮挡的“安全区域”。如果您的UINavigationBar与顶部布局指南对齐,iOS也会自动将其颜色扩展到状态栏后面。对于web开说,很不幸的是没有与之相应的方案

iOS 11 的改变

在iOS 11与早期版本不同的是,webview内容现在尊重安全区域。 这意味着如果你有一个标题栏,它是一个顶部为0的固定位置元素,它将最初呈现在屏幕顶部以下20px:与状态栏的底部对齐。 向下滚动时,它会在状态栏后面向上移动。 当你向上滚动,它会再次落在状态栏的下方(留下一个尴尬的空白,内容显示在20px的空白处)。

你可以看到这个视频剪辑有多糟糕:

Understanding the WebView Viewport in iOS 11 - Ayogo Health Inc.

苹果为什么会做这个改变? 如果您已经看到了iPhone X的设计,这是有道理的:iPhone X的特点是不规则的屏幕形状,在顶部为手机扬声器和相机插入“刘海”。 如果固定的位置元素与屏幕的实际顶部对齐,则最终会在扬声器后面无法访问。 通过对齐状态栏的底部,可以确保头部中的任何内容都可以访问。

酷...除了现在的应用程序看起来很糟糕的头部上下移动和内容明显滚动状态栏后面的尴尬。

幸运的是,苹果增加了一种将安全区域布局指南暴露给CSS的方法。 他们添加了一个类似于CSS变量的概念,最初被称为CSS常量。 想想这些像系统设置的CSS变量,不能被覆盖。 他们被提议给CSS工作组进行标准化,并接受了一个改变:不是使用一个名为constant()的函数来访问这些变量,而是使用一个名为env()的函数。

  • 注意:iOS 11.0使用constant()语法,但未来的版本只支持env()!

4个布局指南常数是:

  • env(safe-area-inset-top):从视口顶部的安全区域插入量(以CSS像素为单位)
  • env(safe-area-inset-bottom):视口底部的安全区域插入量(以CSS像素为单位)
  • env(safe-area-inset-left):视口左侧的安全区域插入量(以CSS像素为单位)
  • env(safe-area-inset-right):视口右侧的安全区域插入量(以CSS像素为单位)

苹果给我们的最终礼物是这些变量也被移植到了UIWebView。

CSS常量示例

比方说,你有一个固定的位置标题栏,你的CSS的iOS 10目前看起来像这样:

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;

    padding-top: 20px; /* Status bar height */
}

要为iPhone X和其他iOS 11设备自动进行调整,您需要为视口元标记添加一个viewport-fit = cover选项,然后将CSS更改为引用常量:

header {
    /* ... */

    /* Status bar height on iOS 10 */
    padding-top: 20px;

    /* Status bar height on iOS 11.0 */
    padding-top: constant(safe-area-inset-top);

    /* Status bar height on iOS 11+ */
    padding-top: env(safe-area-inset-top);
}

为那些不知道如何解释constant()或env()语法的旧设备保留回退值是非常重要的。 你也可以在CSS calc()表达式中使用常量。

你也应该记得为底部的导航做同样的事情


文章转载:https://ayogo.com/blog/ios11-viewport/

有疑问、勘误、请您在下方留言,谢谢合作!

感谢您阅读,这篇文章归 极客点子版权所有.
如果转载,请注明出处: 极客点子版权所有(/page/828.html) 知识共享许可协议
本网站使用 创作共用 归属 - 非商业用途 - 共享4.0国际许可协议的相同方式 许可.

关于作者:

    作者:

    reverse()

    简介:

    nodejs 全栈工程师 、作家、github 开源爱好者
    研究方向:数据分析、 深度学习、 服务器架构、 系统原理

    著作:

    最爱的编程语言:

    Javascript
    Python