获取移动浏览器实际可用高度

最新推荐文章于 2023-11-20 17:23:45 发布

转载最新推荐文章于 2023-11-20 17:23:45 发布 · 3.2k 阅读

前端开发专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种方法，用于获取移动设备上浏览器的实际可用高度，即去除顶部地址栏和底部操作栏后的可视区域大小。此方法适用于不同设备和浏览器环境。

该文章已生成可运行项目，

获取移动浏览器实际可用高度：去掉顶部地址栏、底部操作栏

function getBrowserInterfaceSize() {
    var pageWidth = window.innerWidth;
    var pageHeight = window.innerHeight;

    if (typeof pageWidth != "number") {
        //在标准模式下面
        if (document.compatMode == "CSS1Compat" ) {
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientHeight;
        } else {
            pageWidth = document.body.clientWidth;
            pageHeight = window.body.clientHeight;
        }
    }

    return {
        pageWidth: pageWidth,
        pageHeight: pageHeight
    }
}

解决方案来自 segmentfault: https://segmentfault.com/q/1010000004874572

本文章已经生成可运行项目