【移动端适配二】H5移动端适配屏幕安全区（ios和android）_h5页面在安卓手机适配安全区域

全面屏手机把整个webview（包括状态栏）给H5的话，不对状态栏进行控制往往会有以下如图问题出现，这样头部的返回按钮置于页面的安全区外，无法进行操作。
有问题的：

想要的效果：

具体的实现：

针对ios的刘海屏问题的解决：

一、设置网页在可视窗口的布局方式（重点是添加：viewport-fit=cover）

<meta name="viewport"
        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
1
2

二、把页面主体内容限定在安全区内

添加如下样式：

body {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
    padding-left: env(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
    padding-right: env(safe-area-inset-right);
}
1
2
3
4
5
6
7
8
9
10

注意：
如果页面头部用的是非定位的，页面的主体部分和按钮用的是absolute定位时，要记得给主体部分添加如下样式：

margin-top: constant(safe-area-inset-top);
margin-top: env(safe-area-inset-top);
1
2

或者：

padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
1
2

否则会如下图，遮盖页面的主体部分

页面有底部按钮的话，且底部按钮用fixed或者absolute进行定位，小黑条会遮盖按钮，如图：

解决方法一：
增加按钮的高度。给按钮添加如下样式：

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
1
2

结果如图所示：

解决方法二：
添加距底部的外边距，给按钮添加如下样式：

margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
1
2

效果如图：

解决方法三：
增加空白标签（不推荐，要区别ios的机型）
提供一下全面屏和非全面屏的判断方法，适当根据该方法判断添加margin和padding值：

//判断屏幕是否为全面屏
judgeBigScreen() {
    //，这里根据返回值 true 或false ,返回true的话 则为全面屏
    var result = false;
    var rate = window.screen.height / window.screen.width;
    var limit =
        window.screen.height == window.screen.availHeight ? 1.8 : 1.65; // 临界判断值
    // window.screen.height为屏幕高度
    //  window.screen.availHeight 为浏览器 可用高度
    if (rate > limit) {
        result = true;
    }
    return result;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

针对android的刘海屏、水滴屏等问题的解决：
写个固定的值，但是因为android的屏幕版本太多，要想完美适配的话只能和原生进行交互，从原生处拿到高度用于样式。

上面的情况是空出状态栏的处理，如果状态栏和头部样式有关联，如图所示：

具体实现：
在公共样式内定义：

// ios顶部留出20px高度
.havetop {
    .my-header {
        padding-top: 20px;
    }
    .content {
        padding-top: 20px;
    }
}
.isios {
    .my-header {
        padding-top: constant(safe-area-inset-top);
        padding-top: env(safe-area-inset-top);
    }
    .content {
        padding-top: constant(safe-area-inset-top);
        padding-top: env(safe-area-inset-top);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在index.html页面添加如下判断：

<script>
    window.onload = function () {
        document.getElementById('app').classList.add('havetop');
        if (/iPhone/.test(navigator.userAgent)) {
            document.getElementById('app').classList.add('isios');
        }
    }

</script>
1
2
3
4
5
6
7
8
9

注：具体使用的页面头部（.my-header）是非定位，主体部分（.content）是absolute定位，如图所示：

可能会出现的问题：部分状态栏高的安卓机型，头部会有部分的遮盖，在这里可以用上面的judgeBigScreen这个方法判断一下是否是android的全面屏，如果是全面屏的话给头部和主体部分的padding值适当增加：

index.html页面：

<script>
    //判断屏幕是否为全面屏
    function judgeBigScreen() {
        //这里根据返回值 true 或false ,返回true的话 则为全面屏
        var result = false;
        var rate = window.screen.height / window.screen.width;
        var limit = window.screen.height == window.screen.availHeight ? 1.8 : 1.65; // 临界判断值
        // window.screen.height为屏幕高度
        //  window.screen.availHeight 为浏览器 可用高度
        if (rate > limit) {
            result = true;
        }
        return result;
    }
    window.onload = function () {
       document.getElementById('app').classList.add('havetop');
        if (/iPhone/.test(navigator.userAgent)) {
            document.getElementById('app').classList.add('isios');
        } else {
            //全面屏
            let judgeFullScreen = judgeBigScreen();
            if (judgeFullScreen) {
                document.getElementById('app').classList.add('isFullScreen');
            }
        }
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

我自己添加的css样式为：

.isFullScreen {
    .my-header {
        padding-top: 30px;
        padding-top: 30px;
    }
    .content {
        padding-top: 30px;
        padding-top: 30px;
    }
}
1
2
3
4
5
6
7
8
9
10

效果如下图所示：
区分全屏前：

区分全屏后：

————————————————
版权声明：本文为CSDN博主「zuo-yiran」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zuoyiran520081/article/details/108366329