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 屬性
• availHeight 屬性