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 ...
随机推荐
- 【原创】大数据基础之HDFS（1）HDFS新创建文件如何分配Datanode
HDFS中的File由Block组成,一个File包含一个或多个Block,当创建File时会创建一个Block,然后根据配置的副本数量(默认是3)申请3个Datanode来存放这个Block: 通过 ...
- [转]PuTTY字体颜色设置
转载于 https://blog.csdn.net/cyd_shuihan/article/details/77836290 用putty登录Linux,默认配色方案看不清,我们可以自己设置新的字体大 ...
- Python-Django-Ajax
什么是Ajax: 通过js语言跟后台进行交互的一个东西 -特点:异步,局部刷新 ajax往后台提交数据 $.ajax({ url:'请求的地址', type:'get/post', data:{key ...
- win7下安装linux（centos6.5）双系统详细小白教程
在正式介绍linux安装教程之前,先声明一下本人也是刚开始接触linux,所以教程只以成功安装linux为目标,里面的具体步骤我都是参考网上的教程自己操作实现的,至于为什么要这么做就不多做解释,大家想 ...
- DO、DTO和VO分层设计的好处
2016年10月23日 20:11:03 阅读数:10646 在Java中 VO. PO.DO.DTO. BO. QO.DAO.POJO的概念中介绍过Java中的各种模型概念.在这里简单再总结一下 ...
- 3.RNN推导
1.基本RNN结构 这几天想入门NLP,所以开始了解RNN以及一系列变体.首先RNN最原始的结构如下图(图是按自己的理解用visio画的,有错麻烦提一下), 首先我们来说明一下各个符号的定义: 各个变 ...
- java中的try-catch-finally异常处理（学习笔记）
一.异常概述 异常:Exception,是在运行发生的不正常情况. 原始异常处理: if(条件) { 处理办法1 处理办法2 处理办法3 } if(条件) { 处理办法4 处理办法5 处理办法6 } ...
- 图论算法之DFS与BFS
概述(总) DFS是算法中图论部分中最基本的算法之一.对于算法入门者而言,这是一个必须掌握的基本算法.它的算法思想可以运用在很多地方,利用它可以解决很多实际问题,但是深入掌握其原理是我们灵活运用它的关 ...
- Spark环境搭建（一）-----------HDFS分布式文件系统搭建
下载的压缩文件放在~/software/ 解压安装在~/app/ 一:分布式文件系统搭建HDFS 1,下载Hadoop HDFS环境搭建 使用版本:hadoop-2.6.0-cdh5.7. ...
- 遍历文件后缀名 为 .java的文件
import java.io.File; import java.io.FileFilter; //创建一个功夫类继承文件管理类 public class FileFu implements Fil ...