前言
自从iPhone X推出刘海屏开始,各大Android厂商也随之跟风。
不但推出了刘海屏,甚至还有水滴屏、打孔屏等各种异形的屏幕。
随之而来的就是开发者需要去适配这些各种各样的屏幕。
当然如果Android没有沉浸式的体验,那就不用做屏幕的适配。
如何实现Android的沉浸式体验,请参考ionic1开发——APP体验优化之实现沉浸式状态栏
在iOS上,ionic3是做了iPhone的刘海屏适配的。但是,ionic1并不具备此功能,所以还是需要我们自行适配。
刘海屏出现之前
- iPhone手机的状态栏高度为固定的20
- Android手机的状态栏高度为固定的24
刘海屏出现之后
- iPhone X及之后手机的状态栏高度都是固定的44
- Android手机高度碎片化,不同机型的状态栏的高度是各种各样的高度
思路
鉴于Android手机有各种各样不同的高度,所以只能根据获取到的高度来动态改写css样式。
- 第一步,获取手机状态栏的高度
- 第二步,添加对应platform的初始css样式
- 第三步,动态修改对应platform的css样式
实现
获取手机状态栏的高度
获取手机状态栏的高度,需要通过插件来实现。
在原来cordova-plugin-statusbar插件的基础上新增了获取状态栏高度的方法。
新插件地址(带获取状态栏高度的方法):https://github.com/hhjjj1010/cordova-plugin-statusbar.git
代码示例:
if (window.StatusBar) {
StatusBar.getStatusBarHeight(function (height) {
if (!height) return;
// TODO
});
}
添加对应platform的初始css样式
在项目的www目录下的css文件中复写iOS platform的css样式
/**
* Platform
* --------------------------------------------------
* Platform specific tweaks
*/
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) {
height: 64px;
}
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader).item-input-inset .item-input-wrapper {
margin-top: 19px !important;
}
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
margin-top: 20px;
}
.platform-ios.platform-cordova:not(.fullscreen) .tabs-top > .tabs,
.platform-ios.platform-cordova:not(.fullscreen) .tabs.tabs-top {
top: 64px;
}
.platform-ios.platform-cordova:not(.fullscreen) .has-header,
.platform-ios.platform-cordova:not(.fullscreen) .bar-subheader {
top: 64px;
}
.platform-ios.platform-cordova:not(.fullscreen) .has-subheader {
top: 108px;
}
.platform-ios.platform-cordova:not(.fullscreen) .has-header.has-tabs-top {
top: 113px;
}
.platform-ios.platform-cordova:not(.fullscreen) .has-header.has-subheader.has-tabs-top {
top: 157px;
}
添加Android platform css样式(若已有则可跳过)
/******* Android沉浸式体验样式 *******/
.platform-android.platform-cordova .bar-header:not(.bar-subheader) {
height: 68px;
}
.platform-android.platform-cordova .bar-header:not(.bar-subheader).item-input-inset .item-input-wrapper {
margin-top: 23px !important;
}
.platform-android.platform-cordova .bar-header:not(.bar-subheader) > * {
margin-top: 24px;
}
.platform-android.platform-cordova .tabs-top > .tabs,
.platform-android.platform-cordova .tabs.tabs-top {
top: 68px;
}
.platform-android.platform-cordova .has-header,
.platform-android.platform-cordova .bar-subheader {
top: 68px;
}
.platform-android.platform-cordova .has-subheader {
top: 112px;
}
.platform-android.platform-cordova .has-header.has-tabs-top {
top: 117px;
}
.platform-android.platform-cordova .has-header.has-subheader.has-tabs-top {
top: 161px;
}
/******* Android沉浸式体验样式 *******/
动态修改对应platform的css样式
在app.js中动态修改样式
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
StatusBar.getStatusBarHeight(function (height) {
if (!height) return;
handleNotchStatusBar(Number(height));
});
}
var handleNotchStatusBar = function (statusBarHeight) {
var normalHeight = 0;
var platformStr = "";
if (ionic.Platform.isIOS()) {
normalHeight = 20;
platformStr = "ios";
} else if (ionic.Platform.isAndroid()) {
normalHeight = 24;
platformStr = "android"
}
if (statusBarHeight === normalHeight) {
return;
}
var styleSheets = document.styleSheets;
for (var i = 0; i < styleSheets.length; i++) {
var sheet = styleSheets[i];
if (sheet.href && sheet.href.indexOf('your css file path') !== -1) {
for (var j = 0; j < sheet.cssRules.length; j++) {
var rule = sheet.cssRules[j];
var subStr = '.platform-' + platformStr + '.platform-cordova';
if (rule.selectorText && rule.selectorText.indexOf(subStr) !== -1) {
if (rule.style.height) {
var modifyHeight = Number(rule.style.height.substr(0, rule.style.height.length - 2)) + statusBarHeight - normalHeight;
rule.style.height = modifyHeight + 'px';
}
if (rule.style.top) {
var modifyTop = Number(rule.style.top.substr(0, rule.style.top.length - 2)) + statusBarHeight - normalHeight;
rule.style.top = modifyTop + 'px';
}
if (rule.style.marginTop) {
var modifyMarginTop = Number(rule.style.marginTop.substr(0, rule.style.marginTop.length - 2)) + statusBarHeight - normalHeight;
rule.style.marginTop = modifyMarginTop + 'px';
}
}
}
break;
}
}
};
网友评论