美文网首页
ionic1开发——APP体验优化之适配刘海屏

ionic1开发——APP体验优化之适配刘海屏

作者: hhjjj1010 | 来源:发表于2019-10-09 15:35 被阅读0次

    前言

    自从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;
          }
        }
     };
    
    
    

    相关文章

      网友评论

          本文标题:ionic1开发——APP体验优化之适配刘海屏

          本文链接:https://www.haomeiwen.com/subject/xmlgpctx.html