js 获取浏览器相关的宽高尺寸

简介: js 获取浏览器相关的宽高尺寸

image.png

window 屏幕

屏幕分辨率的高: window.screen.height

屏幕分辨率的宽: window.screen.width

屏幕分辨率的宽: window.screen.width

屏幕可用工作区高度: window.screen.availHeight

屏幕可用工作区宽度: window.screen.availWidth

document 网页

网页可见区域宽: document.body.clientWidth

网页可见区域高: document.body.clientHeight

网页可见区域宽: document.body.offsetWidth (包括边线的宽)

网页可见区域高: document.body.offsetHeight (包括边线的高)

网页正文全文宽: document.body.scrollWidth

网页正文全文高: document.body.scrollHeight

网页被卷去的高: document.body.scrollTop

网页被卷去的左: document.body.scrollLeft

event 事件

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

应用范例

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>请调整浏览器窗口</title>
    <meta http-equiv="content-type" content="text/html; charset=gb2312" />
  </head>
  <body>
    <h2 align="center">请调整浏览器窗口大小</h2>
    <hr />
    <form action="#" method="get" name="form1" id="form1">
      <!--显示浏览器窗口的实际尺寸-->
      浏览器窗口 的 实际高度:
      <input type="text" name="availHeight" size="4" /><br />
      浏览器窗口 的 实际宽度:
      <input type="text" name="availWidth" size="4" /><br />
    </form>
    <script type="text/javascript">
      var winWidth = 0;
      var winHeight = 0;
      //函数:获取尺寸
      function findDimensions() {
        //获取窗口宽度
        if (window.innerWidth) {
          winWidth = window.innerWidth;
        } else if (document.body && document.body.clientWidth) {
          winWidth = document.body.clientWidth;
        }

        //获取窗口高度
        if (window.innerHeight) {
          winHeight = window.innerHeight;
        } else if (document.body && document.body.clientHeight) {
          winHeight = document.body.clientHeight;
        }

        //通过深入Document内部对body进行检测,获取窗口大小
        if (
          document.documentElement &&
          document.documentElement.clientHeight &&
          document.documentElement.clientWidth
        ) {
          winHeight = document.documentElement.clientHeight;
          winWidth = document.documentElement.clientWidth;
        }
        //结果输出至两个文本框
        document.form1.availHeight.value = winHeight;
        document.form1.availWidth.value = winWidth;
      }
      findDimensions();
      //调用函数,获取数值
      window.onresize = findDimensions;
    </script>
  </body>
</html>


目录
相关文章
|
28天前
|
移动开发 JavaScript 前端开发
一些处理浏览器兼容性问题的JavaScript库
这些库在处理浏览器兼容性问题方面都有着各自的特点和优势,可以根据具体的需求和项目情况选择合适的库来使用,从而提高代码的兼容性和稳定性,为用户提供更好的体验。同时,随着浏览器技术的不断发展,还需要持续关注和学习新的兼容性解决方案。
103 48
|
1月前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
29天前
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
|
28天前
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
34 1
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
110 1
|
1月前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
246 9
|
2月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
595 1
|
2月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
146 0
|
2月前
|
JavaScript 前端开发 开发者
JavaScript 浏览器控制台的使用
JavaScript 浏览器控制台的使用
29 0
|
2月前
|
存储 JavaScript 前端开发
JavaScript 与浏览器存储
JavaScript 与浏览器存储
48 0