Ios iPhone X上ionic的屏幕尺寸问题
我正试图在爱奥尼亚3中导出我的应用程序。但是当我在iPhoneX模拟器中启动时,屏幕的顶部和底部有两个空白的ESPACE(屏幕问题?)Ios iPhone X上ionic的屏幕尺寸问题,ios,ionic-framework,iphone-x,Ios,Ionic Framework,Iphone X,我正试图在爱奥尼亚3中导出我的应用程序。但是当我在iPhoneX模拟器中启动时,屏幕的顶部和底部有两个空白的ESPACE(屏幕问题?) 是否有人帮助将分辨率调整为iPhone X分辨率?钛SDK也有同样的问题。问题在于,您需要提供适应新屏幕尺寸的正确启动屏幕:- 肖像:1125x2436 景观:2436x1125 对于Tianium来说,通过调整构建脚本来检测和打包启动屏幕就解决了这个问题,所以Ionic团队可能很快就会做类似的事情 对于本机Xcode,问题可能与此相同,可以通过将正确的映像
是否有人帮助将分辨率调整为iPhone X分辨率?钛SDK也有同样的问题。问题在于,您需要提供适应新屏幕尺寸的正确启动屏幕:-
- 肖像:1125x2436
- 景观:2436x1125
为了删除这些空白,您可以将
viewport fit=cover
添加到元标记中:
<meta name="viewport" content-type="initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
Cordova插件状态栏已更新,可用于2.3.0版的iPhoneX。请检查为iPhoneX添加正确的发布图像
然后按照这些
用于手动修复现有cordova项目
用户界面问题
将其添加到info.plist文件中。修复启动映像是另一个问题
<key>UILaunchStoryboardName</key>
<string>CDVLaunchScreen</string>
UILaunchStoryboardName
彩色荧光屏
在元标记中设置viewport fit=cover
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
首先,将
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">
接下来,在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>
首先,将viewport fit=cover添加到index.html元标记中
第二个添加状态栏插件
cordova插件添加cordova插件状态栏
cordova plugin add更多信息的可能重复:启用viewport fit=cover的横向保持iPhone X的css媒体查询是什么?这对我来说很有效;但是,运行ionic prepare会从info.plist中删除
UILaunchStoryboardName
。有什么建议吗?下面是我的问题和全部细节:同一个问题,它从info.plist中删除了UILaunchStoryboardName
<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>
<splash src="resources/ios/splash/Default@3x~iphone.png" width="1125" height="2436"/>