iOS 11在状态栏区域带来了一些新的，也许是不直观的行为，这对使用Apache Cordova或Ionic等工具的开发人员尤为重要。尤其是这种行为变化会影响到任何基于Web的应用程序，这些应用程序在进行iOS 11构建时使用fixed定位标题栏。此文章可帮助您了解iOS 11中的Webview视口。

注意：现有应用程序将继续工作，因为它们始终可以对其视口行为进行更改。这只会影响使用Xcode 9和iOS 11的目标编译的应用程序。

要了解这些变化，我们需要看看它的历史。

状态栏与安全区

在早起版本的iOS上，状态栏只是一个固定屏幕上方的黑色条带，并且是不可触摸的。它属于系统UI的一部分，你的app运行在它的下方空间中。

随着iOS7的推出，状态栏变成了透明的，它的颜色取自应用程序导航栏的颜色。对于运用在webview中的app比如Cordova，通常要判断iOS的版本然后在固定的导航栏上方预留20px的边距，以便正确的填充导航栏。

较新版的iOS对状态栏引入了一些小的修订版本，包括在打电话时状态栏中显示一个额外的横幅，或者应用程序在后台使用定位功能的提示。

在native端，大部分这些兼容措施都被UINavigationBar以及自动布局指南自动解决掉了。屏幕顶部底部布局指南会自动的判断出当前状态栏的正确高度，确保app内容区是『安全区』，状态栏不会覆盖到该区域。如果你根据顶部布局指南使用UINavigationBar，则iOS也会自动将其颜色延伸到状态栏后面。对于Web端来说，没有这样自动化的解决方案。

iOS 11的改变

iOS 11与早起版本的不同在于，webview内容区超出了安全区。这也就是说，如果你有一个头部导航条使用fixed定位元素并且使用top: 0，那么它会在屏幕顶部20px的下方渲染：对齐到状态栏的底部。

当你向下滚动时，它将向上移动到状态栏的下面。

当你向上滚动时，它将会重新跌落到状态栏的下方（此时会留下一个尴尬的间隙，内容会在这20px的间距内展示）

苹果为什么会这么做呢？

如果你看到了iphone X的设计图，你就会有一个印象：iphone X未来有一个不规则的屏幕形状，在屏幕顶部有一段『刘海』，用来放置话筒与相机。如果fixed定位的元素定位到了真正的屏幕顶部，那该元素中间部分会被扬声器与相机覆盖，从而无法访问。

通过对齐到状态栏的底部，可以确保标题中的任何内容都可以访问。

除了现在的应用程序有一个尴尬的标题栏看起来很槽糕，随着页面上下移动，标题栏会被覆盖到状态栏的后面。

iOS 11 修复

幸运的是，苹果给我们一种方式来控制这种形式，通过meta标签。更幸运的是，这种新的视口行为也适用于老的版本，包括弃用的UIWebView！

这个视口选项是：viewport-fit，它有三个可能的值：

• contain：视口完全包括网页内容，这意味着fixed定位的元素被包含在了iOS 11的安全区内
• cover：网页内容完全覆盖视口，这意味着fixed定位的元素将被固定到视口，即它们也可能会被覆盖，这恢复了我们在ios 10上的行为
• auto：默认值，和contain相同

所以要将你的标题栏恢复到屏幕的顶部，就像在iOS 10中的状态栏一样，只需要添加viewport-fit=cover到meta中标签中既可。

iPhone X

但是，iPhone X的形状不规则呢？状态栏不在是20px高，并且相机与扬声器都向内凸出，你的标题栏内容将会对用户完全不可用。同样需要注意的是，这也适用于固定在屏幕底部的页脚条，它将会被麦克风挡住。

注意：你的app只能使用iPhone的全屏幕空间，现有的应用程序将显示在顶部和底部的黑色空间的视图框中。

幸运的是，苹果公司增加了一种方法来将安全区域布局指南暴露给CSS。他们添加了一个类似于CSS变量的概念，称为CSS常量。想像这些像系统设置的CSS变量，不能被覆盖。它们可以通过CSS中的constant()函数来访问，该函数已被提交给CSS工作组进行标准化。

四个布局指南常量是：

• constant(safe-area-inset-top)：来自视口顶部的安全区域插入量（以CSS像素为单位）
• constant(safe-area-inset-bottom)：从视口底部的安全区域插入量（以CSS像素为单位）。
• constant(safe-area-inset-left)：从视口左侧的安全区域插入量（以CSS像素为单位）
• constant(safe-area-inset-right)：从视口右侧的安全区域插入量（以CSS像素为单位）

苹果给我们的最后的礼物是这些变量也被兼容到到UIWebView。

CSS常量示例

比如你有一个固定的头部导航条，你在iOS 10的CSS就像这样：

header {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 44px;
 padding-top: 20px; /* Status bar height */
}

要是iPhone X或者iOS 11设备可以自动调整，你可以将viewport-fit=cover添加到meta标签中，并在CSS中引入常量：

header {
 /* ... */
 /* Status bar height on iOS 10 */
 padding-top: 20px;
 
 /* Status bar height on iOS 11+ */
 padding-top: constant(safe-area-inset-top);
}

对于不理解constant()语法的旧设备使用后备值。你也可以在CSS calc()表达式中使用常量。

您还需要记住为底部导航栏执行此操作。

总结

以上所述是小编给大家介绍的iOS 11中webview的视口，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# ios11  # webview  # iOS开发中WebView的基本使用方法简介  # IOS中UIWebView加载Loading的实现方法  # IOS中的webView加载HTML  # 详解iOS webview加载时序和缓存问题总结  # iOS Webview自适应实际内容高度的4种方法详解  # ios开发加载webview显示进度条实例  # iOS 对当前webView进行截屏的方法  # iOS获取cell中webview的内容尺寸  # iOS去除Webview键盘顶部工具栏的方法  # 状态栏  # 应用程序  # 的是  # 如果你  # 标题栏  # 有一个  # 就像  # 将会  # 当你  # 适用于  # 给我们  # 这也  # 苹果公司  # 小编  # 早起  # 导航条  # 也会  # 你可以  # 尤其是  # 这意味着 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况？  Laravel如何实现API版本控制_Laravel API版本化路由设计策略  Windows11怎样设置电源计划_Windows11电源计划调整攻略【指南】  详解一款开源免费的.NET文档操作组件DocX（.NET组件介绍之一）  Win11怎么关闭专注助手 Win11关闭免打扰模式设置【操作】  香港服务器建站指南：免备案优势与SEO优化技巧全解析  如何快速搭建高效WAP手机网站吸引移动用户？  三星、SK海力士获美批准：可向中国出口芯片制造设备  laravel怎么实现图片的压缩和裁剪_laravel图片压缩与裁剪方法  Laravel如何实现多表关联模型定义_Laravel多对多关系及中间表数据存取【方法】  网站制作报价单模板图片,小松挖机官方网站报价？  Laravel如何处理JSON字段的查询和更新_Laravel JSON列操作与查询技巧  如何用AI帮你把自己的生活经历写成一个有趣的故事？  韩国代理服务器如何选？解析IP设置技巧与跨境访问优化指南  Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理  阿里云网站搭建费用解析：服务器价格与建站成本优化指南  深圳网站制作培训,深圳哪些招聘网站比较好？  javascript如何操作浏览器历史记录_怎样实现无刷新导航  JavaScript Ajax实现异步通信  制作网站软件推荐手机版,如何制作属于自己的手机网站app应用？  如何快速重置建站主机并恢复默认配置？  Laravel Blade模板引擎语法_Laravel Blade布局继承用法  佐糖AI抠图怎样调整抠图精度_佐糖AI精度调整与放大细化操作【攻略】  Win11搜索栏无法输入_解决Win11开始菜单搜索没反应问题【技巧】  Laravel怎么实现软删除SoftDeletes_Laravel模型回收站功能与数据恢复【步骤】  如何在云主机上快速搭建网站？  Laravel如何使用.env文件管理环境变量？（最佳实践）  如何快速辨别茅台真假？关键步骤解析  在线制作视频的网站有哪些,电脑如何制作视频短片？  JS实现鼠标移上去显示图片或微信二维码  如何在阿里云虚拟主机上快速搭建个人网站？  电商网站制作多少钱一个,电子商务公司的网站制作费用计入什么科目？  Laravel如何与Inertia.js和Vue/React构建现代单页应用  昵图网官网入口 昵图网素材平台官方入口  网站建设要注意的标准 促进网站用户好感度！  Laravel怎么清理缓存_Laravel optimize clear命令详解  Laravel如何使用Gate和Policy进行权限控制_Laravel权限判定与策略规则配置  Laravel如何获取当前用户信息_Laravel Auth门面获取用户ID  Python结构化数据采集_字段抽取解析【教程】  邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？  Laravel如何使用withoutEvents方法临时禁用模型事件  Claude怎样写约束型提示词_Claude约束提示词写法【教程】  如何在阿里云通过域名搭建网站？  如何在阿里云香港服务器快速搭建网站？  制作企业网站建设方案,怎样建设一个公司网站？  Laravel数据库迁移怎么用_Laravel Migration管理数据库结构的正确姿势  java中使用zxing批量生成二维码立牌  焦点电影公司作品,电影焦点结局是什么？  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】  教你用AI润色文章，让你的文字表达更专业