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 ...
随机推荐
- python学习之Numpy.genfromtxt
Python 并没有提供数组功能,虽然列表 (list) 可以完成基本的数组功能,但它并不是真正的数组,而且在数据量较大时,使用列表的速度就会慢的让人难受.Numpy 提供了真正的数组功能,以及对数据 ...
- hdu3652 数位dp记忆化搜索
从未见过的船新版本数位dp,,省去了预处理过程,直接进行计算 #include<bits/stdc++.h> using namespace std; #define ll long lo ...
- SpringBoot 集成数据库连接池Druid
1.pom.xml依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>druid< ...
- jfinal中，render的时候如何取到view根目录
https://www.oschina.net/question/138209_63023
- Excel 转为 MySQL 语句
一.方法 一.假设你的表格有A.B.C三列数据,希望导入到你的数据库中表格table,对应的字段分别是col1.col2.col3 二.在你的表格中增加一列,利用excel的公式自动生成sql语句,具 ...
- 1、python基础
本节主要内容 语言特性 变量 注释 字符串拼接 循环 数据类型与字符编码 三元运算 进制 一 .语言特性 python是一门动态解释性的强类型定义语言. 1.编译和解释语言: 简单讲,编译(compl ...
- Exception in thread "main" java.lang.UnsupportedClassVersionError: org/apache/maven/cli/MavenCli : Unsupported major.minor version 51.0 报错
此报错经常出现,项目中使用的maven版本为3.2.5版本但是去写自动化脚本又需要去3.5.2版本.经常搞混,需要记录一下: 解决如下: 再次install如下: 验证成功!
- mac 配置 ssh 到git (Could not resolve hostname github.com, Failed to connect to github.com port 443 Operation timed out)
1.进入终端命令行 (1)输入:cd .ssh/ 进入到.ssh后,输入ls,会输出“known_hosts”,如果没有创建过rsa的话 (2)输入:man ssh-add (3)输入:ssh-key ...
- docker修改容器信息，打包等
https://blog.csdn.net/x6_9x/article/details/72891404
- Java 标记接口
没有声明或定义方法的接口称为标记接口(Mark Interface).某个类实现该接口时不需要重写方法,表明具有接口标记的功能.Java中常用的3个标记接口如下: 1 Serializable jav ...