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

Question

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

Answer 1

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

Answer 2

我感觉还是用meta标签让浏览器直接全屏比较合适

<!-- 启用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes" /> 

<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">

<!-- UC强制全屏 --> 
<meta name="full-screen" content="yes">

<!-- UC应用模式 --> 
<meta name="browsermode" content="application">

<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">

<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">

<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">

参考常用meta整理