javascript - 如何取不同手机浏览器的实际可用高度？

问题描述

问 题

我用js代码window.screen.availHeight取屏幕的高度，然后拼凑内容来让页面满屏显示。
测试发现不同手机浏览器有自己的地址栏、状态栏等，window.screen.availHeight取到的屏幕高度也包括了这两者,导至本来希望满屏显示的内容溢出到屏幕下方需要下拉滚动条才能看到。
请问怎么才能让页面在任何手机浏览器上都能满屏显示？

解决方案

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
    }
}

这篇关于javascript - 如何取不同手机浏览器的实际可用高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！