获取宽高参考:

方法：

网页可见区域宽： 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中的stream的泛型方法的使用示例

    本文章使用jdk8测试 ,并结合使用lambda测试 测试前准备一些测试数据: class ObjectDemo { private Integer id; private String name; ...

  2. Python-Django-常用字段和参数

    -1 表模型如果不写主键,orm会自动创建一个主键 -2 常用字段 AutoField int自增列,必须填入参数 primary_key=True.当model中如果没有自增列,则自动会创建一个列名 ...

  3. Python-Django-BMS-增删改查

    无名分组 有名分组 反向解析 更改路由后不影响,动态传值 locals()传参 queryset.update() 自定义过滤器 {{forloop.counter}} new.authors.add ...

  4. SQL入门(3):定义约束/断言assertion/触发器trigger

    本文介绍数据库的完整性 完整性控制程序: 指定规则,检查规则 (规则就是约束条件) 动态约束 intergrity constraint::=(O,P,A,R) O : 数据集合, 约束的对象 ?: ...

  5. docker部署项目 <三>

    使用docker运行一个控制台项目,新建一个控制台测试项目 一.安装mono,直接在网易镜像中心找下载路径 docker pull hub.c..com/library/mono:latest 二.安 ...

  6. 原子动作检测 A Better Baseline for AVA

    本文将Faster-RCNN用在了I3D的feature map上,用于视频中多人多动作的检测 challege比赛第二名的整体方法是将Faster-RCNN作用在I3Dfeature上.训练时,以标 ...

  7. UIWebView的常用方法

    //webview导航栏类型enum UIWebViewNavigationType : Int { case LinkClicked case FormSubmitted case BackForw ...

  8. elasticsearch单机部署多个节点

    cp -r elasticsearch-2.4.4 elasticsearch-2.4.4-2 mv elasticsearch-2.4.4 elasticsearch-2.4.4-1 总共cp了三个 ...

  9. Python中何时使用断言

    这个问题是如何在一些场景下使用断言表达式,通常会有人误用它,所以我决定写一篇文章来说明何时使用断言,什么时候不用. 为那些还不清楚它的人,Python的assert是用来检查一个条件,如果它为真,就不 ...

  10. CF444E. DZY Loves Planting

    题目链接 CF444E. DZY Loves Planting 题解 可以..二分网络流 可是 考虑边从小到大排序 考虑每条边能否成为答案 用并查集维护节点之间的联通性 对于一条边来说,如果这条边可以 ...