获取宽高参考:

方法：

网页可见区域宽： 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. ApowerMirror投屏（手机投屏电脑、电脑投屏到手机）

    使用步骤    1. 亲测 使用Apowersoft ApowerMirror v1.4.2.zip版本      2.Apowersoft ApowerMirror v1.4.2.zip 解压安装 ...

  2. 【MySql】update用法

    update 语句可用来修改表中的数据, 简单来说基本的使用形式为: update 表名称 set 列名称=新值 where 更新条件; 以下是在表 students 中的实例: 将 id 为 5 的 ...

  3. ionic3 验证比特币，以太坊，莱特币和其他流行的加密货币地址

    Install ❯❯❯ npm install cryptaddress-validatorionic3 中的引入 import * as cryptaddress from 'cryptaddres ...

  4. 基于netty的socket服务端触发了channelInactive方法，但实际连接没有断开的问题

    背景: 一个中小型H5游戏,后端使用基于 netty 的socket服务 服务端 分为 分发服务器 & 业务服务器,业务服务器可负载 用户客户端与分发服务器连接 分发服务器再作为客户端与每台业 ...

  5. 基于Python Django开发的一个mock

    最近研究了一下python的django框架, 发现这个框架不比Java spring boot差, mock同样一个接口, 代码量少很多, 维护起来也很方便, 废话不多说,直接上代码 1. 安装dj ...

  6. SQL反模式学习笔记20 明文密码

    目标:恢复或重置密码 反模式:使用明文存储密码 1.存储密码 使用明文存储密码或者在网络上传递密码是不安全的. 如果攻击者截取到你用来插入(或者修改)密码的sql语句,就可以获得密码.     黑客获 ...

  7. Python学习（三十七）—— 模板语言之自定义filter和中间件

    一.模板语言之自定义filter 自定义filter文件存放位置 模板中自定义函数 - 在已注册的app中创建一个名字叫 templatetags 文件夹 - 任意创建一个py文件 - 创建名字交 r ...

  8. 向量 dot cross product 点积叉积 几何意义

    向量 dot cross product 点积叉积 几何意义 有向量 a b 点积 a * b = |a| * |b| * cosθ 几何意义: 1. a * b == 0,则 a ⊥ b 2. a ...

  9. 一天带你入门到放弃vue.js(三)

    自定义指令 在上面学习了自定义组件接下来看一下自定义指令 自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是v ...

  10. KaliLinuxNetHunter教程实施刷机解锁Bootloader

    KaliLinuxNetHunter教程实施刷机解锁Bootloader 当用户将前面的工作都准备完成后,即可开始刷机.其中,整个刷机过程分为三个步骤,分别是解锁Bootloader.刷入第三方Rec ...