[英]Screen size issue with ionic on iPhone X
我正在尝试在ionic 3 中导出我的应用程序。 但是当我在 iPhone X 模拟器中启动时,屏幕的顶部和底部有 2 个空的空间(屏幕问题?)。
任何人都可以帮助将分辨率调整为 iPhone X 分辨率?
为了删除那些空白空间,您可以将viewport-fit=cover
添加到您的元标记中:
<meta name="viewport" content-type="initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
为 iphone x 添加正确的启动图像添加帮助链接
然后按照这些
手动修复现有的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">
首先,将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">
那么,statusbar插件PR已经合并进来了,请安装最新稳定版的cordova statusbar。
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" width="1125" height="2436"/>
Cordova 插件状态栏已更新为适用于 2.3.0 中的 iPhoneX 请查看 发行说明
首先,将 viewport-fit=cover 添加到 index.html 元标记中
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
第二个添加状态栏插件
科尔多瓦插件添加科尔多瓦插件状态栏
科尔多瓦插件添加https://github.com/apache/cordova-plugin-statusbar.git
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.