获取宽高参考:

方法：

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕物理分辨率的高： window.screen.height
屏幕物理分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight

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

屏幕缩放因子：window.devicePixelRatio

屏幕逻辑分辨率：window.screen.width * window.devicePixelRatio (缩放因子与物理分辨率的乘积)

测试代码：

 <html>

 <head>

     <title>获取屏幕高度</title>

     <meta charset="utf-8">

 </head>

     <body>

         <div>

             <hr>

             网页可见区宽度：<i id="document.body.clientWidth">xx</i>&nbsp px

             <hr>

             网页可见区域高：<i id="document.body.clientHeight">xx</i>&nbsp px

             <hr>

             <hr>

             网页可见区域宽： (包括边线的宽)<i id="document.body.offsetWidth">xx</i>&nbsp px

             <hr>

             网页可见区域高：  (包括边线的高)：<i id="document.body.offsetHeight">xx</i>&nbsp px

             <hr>

             网页正文全文宽：<i id="document.body.scrollWidth">xx</i>&nbsp px

             <hr>

             网页正文全文高：<i id="document.body.scrollHeight">xx</i>&nbsp px

             <hr>

             网页被卷去的高：<i id="document.body.scrollTop">xx</i>&nbsp px

             <hr>

             网页被卷去的左：<i id="document.body.scrollLeft">xx</i>&nbsp px

             <hr>

             网页正文部分上：<i id="window.screenTop">xx</i>&nbsp px

             <hr>

             网页正文部分左：<i id="window.screenLeft">xx</i>&nbsp px

             <hr>

             屏幕物理分辨率的高：<i id="window.screen.height">xx</i>&nbsp px

             <hr>

             屏幕物理分辨率的宽：<i id="window.screen.width">xx</i>&nbsp px

             <hr>

             屏幕可用工作区高度：<i id="window.screen.availHeight">xx</i>&nbsp px

             <hr>

             屏幕可用工作区宽度：<i id="window.screen.availWidth">xx</i>&nbsp px

             <hr>

             屏幕缩放因子：<i id="window.devicePixelRatio">xx</i>&nbsp 倍

             <hr>

             屏幕逻辑分辨率(缩放因子与物理分辨率的乘积)：<i id="window.screen.width * window.devicePixelRatio">xx</i>&nbsp px

             <hr>

         </div>

     </body>

     <script>

         document.getElementById("document.body.clientWidth").innerHTML = document.body.clientWidth;

         document.getElementById("document.body.clientHeight").innerHTML = document.body.clientHeight;

         document.getElementById("document.body.offsetHeight").innerHTML =document.body.offsetHeight ;

         document.getElementById("document.body.offsetWidth").innerHTML = document.body.offsetWidth;

         document.getElementById("document.body.scrollHeight").innerHTML = document.body.scrollHeight;

         document.getElementById("document.body.scrollWidth").innerHTML =document.body.scrollWidth ;

         document.getElementById("document.body.scrollHeight").innerHTML = document.body.scrollHeight;

         document.getElementById("document.body.scrollTop").innerHTML = document.body.scrollTop;

         document.getElementById("document.body.scrollLeft").innerHTML = document.body.scrollLeft;

         document.getElementById("window.screenTop").innerHTML = window.screenTop;

         document.getElementById("window.screenLeft").innerHTML =window.screenLeft ;

         document.getElementById("window.screen.height").innerHTML = window.screen.height;

         document.getElementById("window.screen.width").innerHTML =window.screen.width ;

         document.getElementById("window.screen.width").innerHTML = window.screen.width;

         document.getElementById("window.screen.availHeight").innerHTML = window.screen.availHeight;

         document.getElementById("window.screen.availWidth").innerHTML = window.screen.availWidth;

         document.getElementById("window.devicePixelRatio").innerHTML =window.devicePixelRatio ;

         document.getElementById("window.screen.width * window.devicePixelRatio").innerHTML = window.screen.width * window.devicePixelRatio ;

     </script>

 </html>

运行效果图：

放大缩小屏幕，获取的参数会相应变化: 

放大：

缩小：

over!!

js获取浏览器和设备的 width和height，的更多相关文章

  1. js获取浏览器和设备相关width（屏幕的宽度）

    首先呢,我们将iPhone手机的相关数据表示如下 我们要理解很多东西,比如逻辑分辨率.物理分辨率.缩放因子.ppi等,这里先不讨论. 首先呢,我们先介绍下各个屏幕宽度: 网页可见区域宽: docume ...

  2. js获取浏览器高度

    常用: JS 获取浏览器窗口大小 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 获取窗口宽度 if (window.innerWidth) winWidth = ...

  3. JS 获取浏览器窗口大小

    JS 获取浏览器窗口大小 <script> // 获取窗口宽度 if (windows.innerWidth) { winWidth = windows.innerWidth; } els ...

  4. JS 获取浏览器和屏幕宽高等信息代码

    JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:doc ...

  5. js获取浏览器高度和宽度值,尽量的考虑了多浏览器。

    js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...

  6. js获取浏览器基本信息：document.body.clientWidth/clientHeight/scrollWidth/scrollTop。（转）

    js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop. 分类: js.jquery.ext.js技术2011 ...

  7. [Jquery] js获取浏览器滚动条距离顶端的距离

    需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小  一.jQuery获取的相关方法 jquery 获取滚动条高度 获取浏览器显示区域的高度 : $(window).height( ...

  8. js获取浏览器滚动条距离顶端的距离

    最近在做项目的时候遇到需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小,在这儿做一个整理保存:    一.jQuery获取的相关方法 jquery 获取滚动条高度 获取浏览器显示 ...

  9. JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth

    常用: JS 获取浏览器窗口大小   // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((docume ...

随机推荐

  1. JAVA中的栈和堆【转】

    原文链接 https://www.cnblogs.com/ibelieve618/p/6380328.html JAVA在程序运行时,在内存中划分5片空间进行数据的存储.分别是:1:寄存器.2:本地方 ...

  2. Elasticsearch JAVA api轻松搞定groupBy聚合

    本文给出如何使用Elasticsearch的Java API做类似SQL的group by聚合. 为了简单起见,只给出一级groupby即group by field1(而不涉及到多级,例如group ...

  3. Python开发【第十篇】：模块

    模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要多个函数才 ...

  4. SQL反模式学习笔记6 支持可变属性【实体-属性-值】

    目标:支持可变属性 反模式:使用泛型属性表.这种设计成为实体-属性-值(EAV),也可叫做开放架构.名-值对. 优点:通过增加一张额外的表,可以有以下好处 (1)表中的列很少: (2)新增属性时,不需 ...

  5. Linux awk学习

    零.awk标准语法 [root@wohaoshuai1 bbb]# echo "abcd" |awk 'BEGIN{print "wohaoshuai"} /a ...

  6. BZOJ4451 [Cerc2015]Frightful Formula 多项式 FFT 递推 组合数学

    原文链接http://www.cnblogs.com/zhouzhendong/p/8820963.html 题目传送门 - BZOJ4451 题意 给你一个$n\times n$矩阵的第一行和第一列 ...

  7. 编译linux内核前用make menuconfig设置时 Unable to find the ncurses ibraries的解决办法

    今天在更新CentOS或者Ubuntu的内核时,执行make menuconfig可能看如这样的错误: *** Unable to find the ncurses libraries or the ...

  8. h5页面

    <!DOCTYPE html><html lang="utf-8"><head> <meta charset="UTF-8&qu ...

  9. Handler Looper 解析

    文章讲述Looper/MessageQueue/Handler/HandlerThread相关的技能和使用方法. 什么是Looper?Looper有什么作用? Looper是用于给线程(Thread) ...

  10. XVIII Open Cup named after E.V. Pankratiev. Grand Prix of Khamovniki

    A. Ability Draft 记忆化搜索. #include<stdio.h> #include<iostream> #include<string.h> #i ...