uni-app的H5适配全面屏-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

uni-app的H5适配全面屏

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

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

适用场景

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

image(496).png

可以看到在页面底部的 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(刷新之后就不行了)等等,这里不再展开了。

示例效果:

image(497).png

相关属性说明

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

参考资料

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章