angular - 在 iPhone X 上使用 Ionic 4
问题描述
让我们从离子信息开始:
Ionic:
ionic (Ionic CLI) : 4.12.0 (C:\Users\Rohan\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.1.2
@angular-devkit/build-angular : 0.13.7
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.2.4
@ionic/angular-toolkit : 1.4.0
Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 6 other plugins)
System:
NodeJS : v10.13.0 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 10
因此,在使用 Devapp 在 iPhone X 上进行测试时,我对 Ionic 4 有一个奇怪的问题(因为我现在在 Windows 上)
在一个特定的页面上,有一个 div 加载在页面正中的顶部,起初,这击中了 iPhone X 的缺口区域。现在我通过以下功能暂时解决了这个问题:
checkModernAppleVariants() {
let iOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
let ratio = window.devicePixelRatio || 1;
let screen = {
width: window.screen.width * ratio,
height: window.screen.height * ratio
};
if (iOS && screen.width == 1125 && screen.height === 2436) {
this.iPhoneXDetected = true;
console.log('iPhone X detected');
document.getElementById('notch').style.height="2.5em";
} else {
this.iPhoneXDetected = false;
console.log('iPhone X not detected')
}
}
所以我所做的基本上是在顶部放置一个 id 为“notch”的 div,每当函数看到它是 iPhone X 时,它就会给 div 一个 2.5em 的高度,这会将所有东西移动到 2.5em 高度以下,从而将其移出凹槽。
事情就是这样,必须有一种“非hacky”的方式来做到这一点。请记住,这是一个没有任何类型的 ion-header 或工具栏的页面。只是一堆 div(这是无法更改的)。
有没有更好的方法来检测 iPhone X/XS/XS Max(或其他任何东西)并自动将东西移出缺口区域?
解决方案
使用 margin-top 而不是 padding-top 对我有用!
body {
margin-top: constant(safe-area-inset-top);
margin-top: env(safe-area-inset-top);
}
推荐阅读
- python - python - 如何在python中不导入日期时间的情况下将字符串日期时间转换为日期时间?
- c# - C# 字符串 + 与 +=
- c++ - Node* 类型值如何以 Iterator 类型返回?
- python - 为什么 tf.gradient 不返回任何内容?
- python - 删除嵌套 JSON 对象中的元素并将其展平
- asp.net - 如果文件扩展名为.tiff,则不会在 tinymce 中触发 images_upload_handler
- c - 关于 C99 中错误处理的理论问题
- javascript - react js中滚动禁用辅助功能的开玩笑测试
- google-apps-script - Google 表格中活动表格的每日更改
- firebase - 无法使用 Firebase /Firestore 功能