屏幕尺寸问题与iPhone上的离子X

问题描述：

我正试图导出我的应用程序在离子3。但是当我在iPhone X模拟器中启动时，屏幕顶部和底部有两个空的空间（屏幕问题？）。屏幕尺寸问题与iPhone上的离子X

任何人都有助于调整分辨率到iPhone X的分辨率？

[iPhone X全屏问题（HTTPS的可能重复： //stackoverflow.com/questions/46190975/iphone-x-full-screen-issue） – rmaddy

更多的信息在： http://blog.ionic.io/updates-for-all-ionic-angular-3-7-和更多/ –

答

与Titanium SDK有相同的问题。问题是，你需要提供正确的推出，屏幕，适应新的屏幕尺寸： -

肖像：1125x2436
景观：2436x1125

钛，它只是解决了通过调整构建脚本来检测和打包启动屏幕，因此Ionic团队很快可能会做类似的事情！

对于本机的Xcode，这个问题可以是相同的，并且通过将正确的图像导入资产目录解析：

答

为了删除空的空间，你可以添加viewport-fit=cover到您的meta标签：

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

答

科尔多瓦插件状态栏更新为iPhoneX在2.3.0工作请检查release notes

答

添加适当的启动图像为iPhone X Launch image adding help link

然后按照这些

对于手动修复到现有的科尔多瓦项目

UI界面问题

添加到您的Info.plist文件。固定发射图像是一个独立的问题

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

集视合=盖在meta标签

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

More help

答

首先，添加viewport-fit=cover到index.html meta标签

<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已经m请安装。请安装最新的稳定版本的cordova状态栏。

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

接下来，将此CSS添加到您的src/app/app中。SCSS：

<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尺寸的启动画面，给它的路径index.html

<splash src="resources/ios/splash/[email protected]~iphone.png" width="1125" height="2436"/>

屏幕尺寸问题与iPhone上的离子X

相关推荐