获取不同手机浏览器的实际可用高度代码分享

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

也可以利用 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">

未经允许不得转载：前端资源网 - w3h5 » 获取不同手机浏览器的实际可用高度代码分享