IOS 10 或 11 上的 Ionic 3 标头高度
Posted
技术标签:
【中文标题】IOS 10 或 11 上的 Ionic 3 标头高度【英文标题】：Ionic 3 header height on IOS 10 or 11 【发布时间】：2017-09-27 23:02:31 【问题描述】：我正在使用 ionic 3 构建移动应用程序
无论如何，当我使用浏览器或 Ionic 视图运行此应用程序时，一切正常，但是，当您在真实设备或 iPhone 模拟器上运行它时，标题的高度发生了变化并且变大了。
请检查下图。
On browser or ionic view image
VS
On Real Device or simulator image
【问题讨论】：
使用 ionic status bar 使其覆盖您的应用程序。this.statusBar.overlaysWebView(true);
【参考方案1】：
在 ios 11 上，您必须将 viewport-fit=cover 添加到 index.html 文件的 viewport 元标记中，以便 WebView 在状态栏下扩展：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>An Ionic App</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
有关更多信息，请参阅 Ionic 清单：http://blog.ionic.io/ios-11-checklist/
【讨论】：
以上是关于IOS 10 或 11 上的 Ionic 3 标头高度的主要内容，如果未能解决你的问题，请参考以下文章
在 IOS 上的 Ionic 3.9.2 中绑定文本/表单时无法滚动
Ionic 3 - Laravel - 不向客户端发送允许 CORS 的标头
ios 11.2.x 上的 ionic cordova 中的 Fire click 事件不起作用