获取宽高参考:

方法：

网页可见区域宽： 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. 解决Apache配置虚拟主机时出现403错误的问题

    1.用文本编辑器打开Apache中的httpd.conf,搜索httpd-vhosts.conf,找到“#Include conf/extra/httpd-vhosts.conf”,并把“#”去掉,启 ...

  2. 批量执行 sql 的 shell 脚本

    最近有用到需要批量导入N个表的sql,一个个导入会吐老血的,写了个shell脚本,便捷导入. 通常我们导入单个sql,可以用 $mysql -uroot -p world < xxxx.sql ...

  3. python数据类型小测试

    # 1. 有两个列表,其中一个列表a,每一项映射到另一个列表b每一项,先对a排序,要求b的中映射关系位置保持不变,给b也按照排序, (b的8对应a的[1,2], 7对应[3,4] ... ) a = ...

  4. Softmax 回归 vs. k 个二元分类器

    如果你在开发一个音乐分类的应用,需要对k种类型的音乐进行识别,那么是选择使用 softmax 分类器呢,还是使用 logistic 回归算法建立 k 个独立的二元分类器呢? 这一选择取决于你的类别之间 ...

  5. 开放接口/RESTful/Api服务的设计和安全方案详解

    一.总体思路 这个涉及到两个方面问题:一个是接口访问认证问题,主要解决谁可以使用接口(用户登录验证.来路验证)一个是数据数据传输安全,主要解决接口数据被监听(HTTPS安全传输.敏感内容加密.数字签名 ...

  6. 记一次Mysql魔鬼实训

    1.查看某个Mysql数据库当前使用的字符集 show create database [库名称] 2.查看当前书库版本信息 #mysql -V MariaDB [(none)]> use my ...

  7. Visual GC提示"不受此JVM支持“解决方案（配置jstatd）

    Visual GC提示"不受此JVM支持“,如果想使用这个插件,就需要配置jstatd连接方式,下面来看jstatd的配置: 1.配置安全策略文件路径$JAVA_HOME/jre/lib/s ...

  8. 隐藏"Input"标签默认样式

    input { width: 400px; border: none; background-color: inherit; border-bottom: #fbfee9 solid 3px; fon ...

  9. Egret--添加一个精灵事件

    class Hello extends egret.DisplayObjectContainer{ //入口函数 private onAddStage(event:egret.Event){ //打开 ...

  10. pytorch, LSTM介绍

    本文中的RNN泛指LSTM,GRU等等 CNN中和RNN中batchSize的默认位置是不同的. CNN中:batchsize的位置是position 0. RNN中:batchsize的位置是pos ...