专栏首页前端资源获取不同手机浏览器的实际可用高度代码分享

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WebStorm绑定Chrome浏览器实现实时自动刷新

    1、Ctrl + Alt + S 打开设置 找到 Build, Execution, Deployment --> Debugger  -->  Live Ed...

    德顺
  • 【笔记】微信小程序通过app.json设置底部导航

    borderStyle tabbar上边框的颜色, 仅支持 black/white

    德顺
  • 常用meta标签属性整理总汇

    注意,很多人使用initial-scale=1到非响应式网站上,这会让网站以100%宽度渲染,用户需要手动移动页面或者缩放。如果和initial-scale=1...

    德顺
  • 让WordPress支持google AMP

    1.关于AMP 在移动互联网的时代,尽管网站响应式设计可以满足多屏(pc、手机、ipad等)浏览,但google在2015年10月推出了更快移动页面访问速度的技...

    Jianbo
  • 读写锁ReaderWriterLockSlim

    如果我们只是简单的使用lock方式去加锁,则会影响性能。如果采用读写锁,那么多个线程可以同时读取该对象,只有等到对象被写入锁占用的时候,才会阻塞。 也就是说某个...

    jasonlu
  • How to view past performance with sar in Linux

    There are many tools/utilities that can be used to analyze the current system pe...

    heidsoft
  • 数据才是永恒的存在

    作者介绍:2012年进入腾讯,负责腾讯云数据库平台(CDB)和腾讯云分布式存储平台(CBS)的运维工作,对数据库高可用、数据库调优、分布式存储运维等领域有丰富的...

    腾讯技术工程官方号
  • centos7中python3环境支持s

    在centos7环境中常规安装python3的话无法支持sqlite3和ssl,所以在安装pytho3是需要带上sqlite3库和ssl库:

    用户2398817
  • 【Spark研究】Spark之工作原理

    基本概念 理解Spark的运行模式涉及一系列概念: (1)Cluster Manager:在集群上获取资源的外部服务。目前有三种类型:1. Standalone...

    陆勤_数据人网
  • 浅谈持续集成

    最近在看软件质量保障相关的一些资料,持续集成占据了其中很大一部分篇幅。这篇文章,主要内容是对持续集成相关知识的整理归纳,以及个人对持续集成的一些思索总结,介绍持...

    写博客的老张

扫码关注云+社区

领取腾讯云代金券