js获取浏览器和设备的 width和height，
获取宽高参考:
方法：
网页可见区域宽： 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>  px
<hr>
网页可见区域高：<i id="document.body.clientHeight">xx</i>  px
<hr>
<hr>
网页可见区域宽： (包括边线的宽)<i id="document.body.offsetWidth">xx</i>  px
<hr>
网页可见区域高： (包括边线的高)：<i id="document.body.offsetHeight">xx</i>  px
<hr>
网页正文全文宽：<i id="document.body.scrollWidth">xx</i>  px
<hr>
网页正文全文高：<i id="document.body.scrollHeight">xx</i>  px
<hr>
网页被卷去的高：<i id="document.body.scrollTop">xx</i>  px
<hr>
网页被卷去的左：<i id="document.body.scrollLeft">xx</i>  px
<hr>
网页正文部分上：<i id="window.screenTop">xx</i>  px
<hr>
网页正文部分左：<i id="window.screenLeft">xx</i>  px
<hr>
屏幕物理分辨率的高：<i id="window.screen.height">xx</i>  px
<hr>
屏幕物理分辨率的宽：<i id="window.screen.width">xx</i>  px
<hr>
屏幕可用工作区高度：<i id="window.screen.availHeight">xx</i>  px
<hr>
屏幕可用工作区宽度：<i id="window.screen.availWidth">xx</i>  px
<hr>
屏幕缩放因子：<i id="window.devicePixelRatio">xx</i>  倍
<hr>
屏幕逻辑分辨率(缩放因子与物理分辨率的乘积)：<i id="window.screen.width * window.devicePixelRatio">xx</i>  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，的更多相关文章
- js获取浏览器和设备相关width（屏幕的宽度）
首先呢,我们将iPhone手机的相关数据表示如下 我们要理解很多东西,比如逻辑分辨率.物理分辨率.缩放因子.ppi等,这里先不讨论. 首先呢,我们先介绍下各个屏幕宽度: 网页可见区域宽: docume ...
- js获取浏览器高度
常用: JS 获取浏览器窗口大小 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 获取窗口宽度 if (window.innerWidth) winWidth = ...
- JS 获取浏览器窗口大小
JS 获取浏览器窗口大小 <script> // 获取窗口宽度 if (windows.innerWidth) { winWidth = windows.innerWidth; } els ...
- JS 获取浏览器和屏幕宽高等信息代码
JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:doc ...
- js获取浏览器高度和宽度值,尽量的考虑了多浏览器。
js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...
- js获取浏览器基本信息：document.body.clientWidth/clientHeight/scrollWidth/scrollTop。（转）
js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop. 分类: js.jquery.ext.js技术2011 ...
- [Jquery] js获取浏览器滚动条距离顶端的距离
需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小 一.jQuery获取的相关方法 jquery 获取滚动条高度 获取浏览器显示区域的高度 : $(window).height( ...
- js获取浏览器滚动条距离顶端的距离
最近在做项目的时候遇到需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小,在这儿做一个整理保存: 一.jQuery获取的相关方法 jquery 获取滚动条高度 获取浏览器显示 ...
- JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((docume ...
随机推荐
- 非root用户安装java版本
有时候,我们所用的用户并不是root用户,升级java版本,其实是一个非常简单的过程,具体过程如下: 将下载好的tar包进行解压,然后进行配置文件,在命令行敲入 vi ~/.bashrc,在这个文件 ...
- c4b和c4f的区别
1. cc.c4b的参数直接填rgba的值. 2 .cc.c4f(r,g,b,透明度),把rgb值填进去,会发现颜色不对,需要把rgb值除以255,所以最终转换公式是: cc.c3b(r,g,b) = ...
- thymeleaf的onclick标签传参异常
转自https://my.oschina.net/u/2312080/blog/2878183 异常 严重: Servlet.service() for servlet [DispatcherServ ...
- vue-i18n国际化在data中切换不起作用
vue-i18n是一个针对于vue的国际化插件,使用非常简单,具体使用方式看我细细道来. 实现方式 1. 下载包 npm install vue-i18n 2. 配置 在main.js文件中加入如下配 ...
- Token令牌管理权限
什么是token HTTP是一种无状态的协议,也就是HTTP没法保存客户端的信息,没办法区分每次请求的不同. Token是服务器生成的一串字符,作为客户端请求的令牌.当第一次登陆后,服务器会分发Ton ...
- js小方法，获取知道公历生日 （‘1992-01-19’），获取阴历生日日期，属相，非简单根据年份判断-----------声明：整理自网络！！
let lunar = { tg: '甲乙丙丁戊己庚辛壬癸', dz: '子丑寅卯辰巳午未申酉戌亥', number: '一二三四五六七八九十', year: '鼠牛虎兔龙蛇马羊猴鸡狗猪', mont ...
- JDBC 返回主键
转载至:https://www.liyongzhen.com/ 上一节课里我们学习通过PreparedStatement对象执行带参数的查询SQL和修改SQL. 这节课我们学习使用 PreparedS ...
- 西北地区打不开github的解决办法~
泱泱我大西北,github打不开,的确痛苦的. http://ipaddress.com/ip_lookup/ 先查github.com 可能存在打不开的情况~ 随便找一个web在线代理,就可以查到了 ...
- python运算符——算数运算符
加减乘除比较简单这里不多赘述了,print(2 +-*/ 3),唯一需要注意的就是整除运算,符号是“//”,整除运算取的是整数部分,而不是四舍五入哦! print(5 / 2) 这个运行的结果是 ...
- pycharm中连接公网IP方法
我们的公网IP可以加到pycharm里面,这样程序跑的时候,在测试过程中就用pycharm直接修改文件,然后在pycharm里面上传,操作更加便捷 在pycharm中找到tool按钮,在菜单栏里面 然 ...