iPhone X 上 ionic 的屏幕尺寸问题

Posted

技术标签:

【中文标题】iPhone X 上 ionic 的屏幕尺寸问题【英文标题】:Screen size issue with ionic on iPhone X 【发布时间】:2017-09-13 10:20:19 【问题描述】:

我正在尝试在 ionic 3 中导出我的应用。但是当我在 iPhone X 模拟器中启动时,屏幕顶部和底部有 2 个空白空格(屏幕问题?)。

有人帮忙调整分辨率以适应 iPhone X 分辨率吗?

【问题讨论】:

iPhone X full screen issue的可能重复 更多信息:blog.ionic.io/updates-for-all-ionic-angular-3-7-and-more 【参考方案1】:

为了删除这些空白,您可以将viewport-fit=cover添加到您的元标记中:

<meta name="viewport" content-type="initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

【讨论】:

在启用 viewport-fit=cover 的情况下,横向放置 iPhone X 的 css 媒体查询是什么?【参考方案2】:

Titanium SDK 也有同样的问题。问题是您需要提供适应新屏幕尺寸的正确启动屏幕:-

纵向:1125x2436 风景:2436x1125

对于 Titanium,它只是通过调整构建脚本来检测和打包启动屏幕来解决,所以 Ionic 团队可能很快就会做类似的事情!

对于本机 Xcode,问题可能相同,可通过将正确的图像放入 Asset-Catalog 来解决:

【讨论】:

【参考方案3】:

为 iphone x 添加正确的启动图像Launch image adding help link

然后按照这些

用于手动修复现有的 cordova 项目

UI 界面问题

将此添加到您的 info.plist 文件中。修复启动图像是一个单独的问题

<key>UILaunchStoryboardName</key>
<string>CDVLaunchScreen</string>

在元标记中设置 viewport-fit=cover

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">

More help

【讨论】:

这对我有用;但是,运行 ionic prepare 会从 info.plist 中删除 UILaunchStoryboardName。有什么建议吗?这是我的完整问题:***.com/questions/60197628/… 同样的问题,它从 info.plist 中删除了 UILaunchStoryboardName【参考方案4】:

首先,将viewport-fit=cover 添加到index.html 元标记中

<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">

那么,状态栏插件PR已经合并进去了,请安装最新稳定版的cordova状态栏。

ionic cordova plugin rm cordova-plugin-statusbar
ionic cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git

接下来,在你的 src/app/app.scss 中添加这个 CSS:

<style>
.ios.cordova:not(.fullscreen) .bar-header:not(.bar-subheader) 
  height: calc(44px + constant(safe-area-inset-top));



.ios.cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * 
  margin-top: constant(safe-area-inset-top);


div.tab-nav.tabs 
  height: calc(49px + constant(safe-area-inset-bottom));


ion-content.padding.scroll-content.ionic-scroll.has-header.has-tabs 
  top: calc(64px + constant(safe-area-inset-top));

</style>

最后一个, 为iphone X添加一个1125 × 2436大小的闪屏,在config.xml中给出路径

<splash src="resources/ios/splash/Default@3x~iphone.png"  />

【讨论】:

【参考方案5】:

Cordova 插件状态栏已更新为在 2.3.0 中适用于 iPhoneX 请查看release notes

【讨论】:

【参考方案6】:

首先,将 viewport-fit=cover 添加到 index.html 元标记中

&lt;meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"&gt;

第二次添加状态栏插件

cordova插件添加cordova-plugin-statusbar

cordova 插件添加https://github.com/apache/cordova-plugin-statusbar.git

【讨论】:

以上是关于iPhone X 上 ionic 的屏幕尺寸问题的主要内容,如果未能解决你的问题,请参考以下文章

明年苹果还要涨价!大屏iPhone X现身…

移动端,多屏幕尺寸高清屏retina屏适配的解决方案

移动端网页设计尺寸标准

iphonex兼容的内屏参数

iphone 4 闪屏大小

具有全屏图像视图的启动屏幕 .XIB