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>


目录
相关文章
|
4天前
|
JavaScript
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
|
6天前
|
存储 前端开发 安全
JavaScript进阶 - 浏览器存储:localStorage, sessionStorage, cookies
【7月更文挑战第2天】探索Web存储:localStorage持久化,sessionStorage会话限定,cookies则伴随HTTP请求。了解它们的特性和限制,如localStorage的5MB容量限制、跨域问题,sessionStorage的生命周期,及cookies的安全与带宽消耗。使用时需权衡安全、效率与应用场景。示例代码展示存储与检索方法。
|
2天前
|
存储 Web App开发 JavaScript
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
9 0
|
3天前
|
Web App开发 编解码
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
|
5天前
|
Web App开发 JavaScript 前端开发
03 JavaScript学习:浏览器中执行 JavaScript
03 JavaScript学习:浏览器中执行 JavaScript
|
6天前
|
JavaScript
js document.compatMode【详解】(含准确获取浏览器宽高等尺寸的方法)
js document.compatMode【详解】(含准确获取浏览器宽高等尺寸的方法)
9 0
|
2月前
|
JavaScript 前端开发 UED
JS:如何获取浏览器窗口尺寸?
JS:如何获取浏览器窗口尺寸?
153 1
|
2月前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
68 0
|
2月前
|
Web App开发 JavaScript 前端开发
浏览器与Node.js事件循环:异同点及工作原理
浏览器与Node.js事件循环:异同点及工作原理
|
21天前
|
Web App开发 JavaScript 前端开发
使用 JS 实现在浏览器控制台打印图片 console.image()
在前端开发过程中,调试的时候,我们会使用 console.log 等方式查看数据。但对于图片来说,仅靠展示的数据与结构,是无法想象出图片最终呈现的样子的。 虽然我们可以把图片数据通过 img 标签展示到页面上,或将图片下载下来进行预览。但这样的调试过程实在是复杂,何不实现一个 console.image() 呢?
28 1
使用 JS 实现在浏览器控制台打印图片 console.image()