获取宽高参考:

方法:


网页可见区域宽: 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. 【python】md5加密方法相关使用

    md5方法在hashlib库中,使用前需要先导入.它的主要方法为update,copy,以及转换为二进制,十六进制. 用法说明: Help on HASH object: class HASH(bui ...

  2. Laravel 多数据库配置及查询操作

    laravel文档好像没有写得很详细 https://docs.golaravel.com/docs/5.3/database/ Using Multiple Database Connections ...

  3. 【原创】大数据基础之Ambari(5)通过Ambari部署Hue

    ambari2.7.3(hdp3.1) 安装 hue4.2 ambari的hdp中原生不支持hue安装,下面介绍如何通过添加service的方式使ambari支持hue安装: 官方:http://ge ...

  4. Java Spring Boot VS .NetCore (一)来一个简单的 Hello World

    系列文章 Java Spring Boot VS .NetCore (一)来一个简单的 Hello World Java Spring Boot VS .NetCore (二)实现一个过滤器Filte ...

  5. html_基础标签

    块级标签: 默认情况会占位一整行行内(内联)标签:默认只有自己的大小 块级标签如: <div>我是字</div>  <h1>标题1</h1>  < ...

  6. pandas 数据处理实例

    描述:行标签为日期,列标签为时间,表哥的值是 float 的数值# 一. 读取 csv 文件df=pd.read_csv("delay_3.csv",encoding = &quo ...

  7. python学习:格式化输出

    格式化输出 代码如下: name = input("Name:") age = input("Age:") job = input("Job:&quo ...

  8. JS对象1

    1 String对象 字符串创建 (1) 直接创建 var s="hello"; console.log(s); console.log(typeof s) >> he ...

  9. mongodb配置问题

    1.安装好mongodb后需要在控制行输入很长的一窜很麻烦,可以新建一个.bat文件 cd F:\mongodb\Server\3.0\binmongod --dbpath "F:\mong ...

  10. (66)Wangdao.com第十一天_JavaScript 数组Array

    数组 Array 本质上,数组属于一种特殊的对象.typeof 运算符会返回数组的类型是 object 数组的特殊性体现在,它的键名是按次序排列的一组整数(0,1,2...) // Object.ke ...