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 ...
随机推荐
- 【原创】大叔问题定位分享（27）spark中rdd.cache
spark 2.1.1 spark应用中有一些task非常慢,持续10个小时,有一个task日志如下: 2019-01-24 21:38:56,024 [dispatcher-event-loop-2 ...
- win10 激活工具 Re-LoaderByR@1n.exe
名字叫 Re-LoaderByR@1n.exe 无广告, https://pan.baidu.com/s/1MBix1cZxKpUTA6MUgL7uLQ 如果变成教育版,可以用以下激活码变成专业版:W ...
- js定义数组集合
简单描述:最近脑子有点抽,js要用到数组,竟然傻傻的写了 var [] str = .简直是糟糕的不要不要的 //js代码var str = [];var str =new Array(); 啥也不说 ...
- Vertx eventbus模块解析
eventbus 事件總線 協議棧 TCP分包,粘包解決採用方案: 消息定长(定義消息体總长度),消息分为消息头和消息体 dataType bytes description int 4 包体总大小 ...
- Unable to find header files
在本模块导出头文件时,可以使用如下方式: LOCAL_EXPORT_C_INCLUDE_DIRS := $(MY_DIRECTORY_PATH) LOCAL_EXPORT_C_INCLUDES := ...
- 著名的3像素Bug（div+img，多出几像素）
<div><img src="...."></div> 给img的css设置display: block;/*用来去除div下边莫名多出来的3p ...
- Yii2中mongodb使用ActiveRecord的数据操作
概况 Yii2 一个高效安全的高性能PHP框架.mongodb 一个高性能分布式文档存储NOSQL数据库. 关于mongodb与mysql的优缺点,应该都了解过. mysql传统关系数据库,安全稳定 ...
- html表单通过关联数组向php后台传多条数据并遍历输出
通过表单向php后台传多条数据,以关联数组方式呈现,废话不多说,代码附上: html表单代码,方式我设置为get: <form action="php/cart.php" m ...
- UOJ#276. 【清华集训2016】汽水 二分答案 点分治
原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ276.html 题解 首先,读入的时候就将所有的 $w_i$ 减掉 $k$ . 于是我们要求的就是平均值最 ...
- UOJ#201. 【CTSC2016】单调上升路径 构造
原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ201.html 题解 首先把题目里面的提示抄过来: 结论:假设带权无向图 G 有 100 个节点 1000 ...