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】md5加密方法相关使用
md5方法在hashlib库中,使用前需要先导入.它的主要方法为update,copy,以及转换为二进制,十六进制. 用法说明: Help on HASH object: class HASH(bui ...
- Laravel 多数据库配置及查询操作
laravel文档好像没有写得很详细 https://docs.golaravel.com/docs/5.3/database/ Using Multiple Database Connections ...
- 【原创】大数据基础之Ambari(5)通过Ambari部署Hue
ambari2.7.3(hdp3.1) 安装 hue4.2 ambari的hdp中原生不支持hue安装,下面介绍如何通过添加service的方式使ambari支持hue安装: 官方:http://ge ...
- Java Spring Boot VS .NetCore (一)来一个简单的 Hello World
系列文章 Java Spring Boot VS .NetCore (一)来一个简单的 Hello World Java Spring Boot VS .NetCore (二)实现一个过滤器Filte ...
- html_基础标签
块级标签: 默认情况会占位一整行行内(内联)标签:默认只有自己的大小 块级标签如: <div>我是字</div> <h1>标题1</h1> < ...
- pandas 数据处理实例
描述:行标签为日期,列标签为时间,表哥的值是 float 的数值# 一. 读取 csv 文件df=pd.read_csv("delay_3.csv",encoding = &quo ...
- python学习:格式化输出
格式化输出 代码如下: name = input("Name:") age = input("Age:") job = input("Job:&quo ...
- JS对象1
1 String对象 字符串创建 (1) 直接创建 var s="hello"; console.log(s); console.log(typeof s) >> he ...
- mongodb配置问题
1.安装好mongodb后需要在控制行输入很长的一窜很麻烦,可以新建一个.bat文件 cd F:\mongodb\Server\3.0\binmongod --dbpath "F:\mong ...
- (66)Wangdao.com第十一天_JavaScript 数组Array
数组 Array 本质上,数组属于一种特殊的对象.typeof 运算符会返回数组的类型是 object 数组的特殊性体现在,它的键名是按次序排列的一组整数(0,1,2...) // Object.ke ...