uni-app的H5适配全面屏

记录一下如何在用uni-app开发h5时适配全面屏

最近用uni-app开发h5应用时，需要适配全面屏，所以查阅相关资料，将修改涉及到的一些注意点分享一下。

适用场景

页面带有操作按钮，例如「确定」、「提交」、「删除」之类，操作按钮需要置底显示的情况。
如下图：

可以看到在页面底部的 home indicator 横条与操作按钮重叠了。

解决方法

主要方法就是需要判断当前是否是全面屏然后为底部操作栏增加相应的样式。

那么如何判断是否是全面屏呢？

我们可以在uni-app项目的公用函数里添加一段js来判断

function() {
    let isFullScreen = false
    const rate = window.screen.height / window.screen.width;
    let limit =  window.screen.height == window.screen.availHeight ? 1.8 : 1.65; // 临界判断值   
    // window.screen.height为屏幕高度
    // window.screen.availHeight 为浏览器 可用高度
    if (rate > limit) {
        isFullScreen = true;
    }
    return isFullScreen
}

在需要判断全面屏的页面引入工具函数之后使用即可：
例如 util.js

<template>
    <view>
        ...
        <view class="buttom-box" :class="{'full-screen':isFullScreen}">
            <view class="flow-button">
                <button class="btn-same btn-submit" @tap="submit" :disabled="disabled"
                    hover-class="com-hover-btn">发布</button>
            </view>
        </view>
        ...
    </view>
</template>

<script>
import helper from '@/common/js/util.js'
export default {
    data() {
        return {
            isFullScreen: helper.checkFullScreen()
        }
    }
}
</script>

当然我们也可以在app初始化的时候就进行判断然后存入全局变量，例如 localstorage、vuex(刷新之后就不行了)等等，这里不再展开了。

示例效果：

相关属性说明

• window.screen.availWidth：声明了显示浏览器的屏幕的可用宽度，以像素计。在 Windows 这样的操作系统中，这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。
• window.screen.availHeight：声明了显示浏览器的屏幕的可用高度，以像素计。在 Windows 这样的操作系统中，这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。
• window.screen.width：声明了显示浏览器的屏幕的宽度，以像素计。
• window.screen.height：声明了显示浏览器的屏幕的高度，以像素计。

参考资料

• availWidth 属性(https://www.w3school.com.cn/jsref/prop_screen_availwidth.asp)
• availHeight 属性(https://www.w3school.com.cn/jsref/prop_screen_availheight.asp)