获取不同手机浏览器的实际可用高度代码分享
但是不同手机浏览器有自己的地址栏、状态栏等，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">本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读