首页 > 其他分享 >JS获取屏幕分辨率及当前窗口宽高等数据

JS获取屏幕分辨率及当前窗口宽高等数据

时间：2022-09-07 13:48:01浏览次数：81  
标签：body 网页 documentElement 分辨率 JS window 屏幕 document screen

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
网页可见区域宽： 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.screen.colorDepth
像素/英寸 window.screen.deviceXDPI

window.innerWidth
window.innerHeight
getPageScale().pageWidth
getPageScale().pageHeight

实现效果：

 

 

 

 代码实现：

index.html

<!DOCTYPE >
<html>
<head>
<title>请调整浏览器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2><hr>
<h2 align="center">请调整浏览器窗口大小</h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!--显示浏览器窗口的实际尺寸-->
document.documentElement.clientWidth ==> 可见区域宽度   <input type="text" name="eleWidth" size="4"><br>
document.documentElement.clientHeight ==> 可见区域高度   <input type="text" name="eleHeight" size="4"><br>
网页可见区域宽：document.body.clientWidth   <input type="text" name="availWidth" size="4"><br>
网页可见区域高：document.body.clientHeight   <input type="text" name="availHeight" size="4"><br>
网页可见区域宽：document.body.offsetWidth (包括边线的宽)   <input type="text" name="offsetWidth" size="4"><br>
网页可见区域高：document.body.offsetHeight (包括边线的高)   <input type="text" name="offsetHeight" size="4"><br>
网页正文全文宽：document.body.scrollWidth   <input type="text" name="scrollWidth" size="4"><br>
网页正文全文高：document.body.scrollHeight   <input type="text" name="scrollHeight" size="4"><br> 
网页被卷去的高：document.body.scrollTop   <input type="text" name="scrollTop" size="4"><br>
网页被卷去的左：document.body.scrollLeft   <input type="text" name="scrollLeft" size="4"><br>
网页正文部分上：window.screenTop   <input type="text" name="screenTop" size="4"><br>
网页正文部分左：window.screenLeft   <input type="text" name="screenLeft" size="4"><br>
屏幕分辨率的高：window.screen.height   <input type="text" name="height" size="4"><br>
屏幕分辨率的宽：window.screen.width   <input type="text" name="width" size="4"><br>
屏幕可用工作区高度：window.screen.availHeight   <input type="text" name="aHeight" size="4"><br>
屏幕可用工作区宽度：window.screen.availWidth   <input type="text" name="aWidth" size="4"><br>
window.screen.colorDepth：<input type="text" name="colorDepth" size="4"><br>
像素/英寸 window.screen.deviceXDPI：<input type="text" name="deviceXDPI" size="4"><br>
window.innerWidth：<input type="text" name="innerWidth" size="4"><br>
window.innerHeight：<input type="text" name="innerHeight" size="4"><br>
getPageScale().pageWidth：<input type="text" name="pageWidth" size="4"><br>
getPageScale().pageHeight：<input type="text" name="pageHeight" size="4"><br>
</form>

<script type="text/javascript">
var wineleWidth = 0;
var wineleHeight = 0;
var winWidth = 0;
var winHeight = 0;
var winscrollWidth =0;
var winscrollHeight = 0;
var winscrollTop = 0;
var winscrollLeft = 0;
var winscreenTop = 0;
var winscreenLeft = 0;
var winheight = 0;
var winwidth = 0;
var winavailHeight= 0;
var winavailWidth= 0;
var wincolorDepth =0;
var windeviceXDPI =0;
var wininnerWidth = 0;
var wininnerHeight = 0;
var winpageWidth  = 0;
var winpageHeight = 0;

function findDimensions() //函数：获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//结果输出至两个文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}

function getEleWidth() {
   if(document.documentElement.clientWidth){
    wineleWidth = document.documentElement.clientWidth;
   }
   document.form1.eleWidth.value = wineleWidth;
}
 // 获取浏览器窗口的可视区域的高度
 function getEleHeight() {
  if(document.documentElement.clientHeight){
    wineleHeight = document.documentElement.clientHeight;
  }
  document.form1.eleHeight.value = wineleHeight;
} 

function getOffsetWidth() {
   if(document.documentElement.offsetWidth || document.body.offsetWidth){
    winoffsetWidth = document.body.offsetWidth;
   }
   document.form1.offsetWidth.value = winoffsetWidth;
}
 // 获取浏览器窗口的可视区域的高度
 function getOffsetHeight() {
  if(document.documentElement.offsetHeight || document.body.offsetHeight){
    winoffsetHeight = document.body.offsetHeight;
  }
  document.form1.offsetHeight.value = winoffsetHeight;
} 


  // 获取浏览器窗口的可视区域的宽度
function getScrollWidth() {
   if(document.documentElement.scrollWidth || document.body.scrollWidth){
    winscrollWidth = document.body.scrollWidth;
   }
   document.form1.scrollWidth.value = winscrollWidth;
}
 // 获取浏览器窗口的可视区域的高度
 function getScrollHeight() {
  if(document.documentElement.scrollHeight || document.body.scrollHeight){
    winscrollHeight = document.body.scrollHeight;
  }
  document.form1.scrollHeight.value = winscrollHeight;
} 
 // 获取浏览器窗口水平滚动条的位置
 function getScrollLeft() {
  if(document.body.scrollLeft){
    winscrollLeft = document.body.scrollLeft;
  }
  document.form1.scrollLeft.value = winscrollLeft;
}
   // 获取浏览器窗口垂直滚动条的位置
 function getScrollTop() {
  if(document.body.scrollTop){
    winscrollTop = document.body.scrollTop;
  }
  document.form1.scrollTop.value = winscrollTop;
 }
 
 function getScreenTop() {
  if(window.screenTop){
    winscreenTop = window.screenTop;
  }
  document.form1.screenTop.value = winscreenTop;
 }
 function getScreenLeft() {
  if(window.screenLeft){
    winscreenLeft = window.screenLeft;
  }
  document.form1.screenLeft.value = winscreenLeft;
 }
 function getWinheight() {
  if(window.screen.height){
    winheight = window.screen.height;
  }
  document.form1.height.value = winheight;
 }
 function getWinwidth() {
  if(window.screen.width){
    winwidth = window.screen.width;
  }
  document.form1.width.value = winwidth;
 }
 function getWinavailHeight() {
  if(window.screen.availHeight){
    winavailHeight = window.screen.availHeight;
  }
  document.form1.aHeight.value = winavailHeight;
 }
 function getWinavailwidth() {
  if(window.screen.availWidth){
    winavailWidth = window.screen.availWidth;
  }
  document.form1.aWidth.value = winavailWidth;
 }

 
 function getWincolorDepth() {
  if(window.screen.colorDepth){
    wincolorDepth = window.screen.colorDepth;
  }
  document.form1.colorDepth.value = wincolorDepth;
 }
 
 function getWindeviceXDPI() {
  if(window.screen.deviceXDPI){
    windeviceXDPI = window.screen.deviceXDPI;
  }
  document.form1.deviceXDPI.value = windeviceXDPI;
 }

 function getWininnerWidth() {
  if(window.innerWidth){
    wininnerWidth = window.innerWidth;
  }
  document.form1.innerWidth.value = wininnerWidth;
 }
 function getWininnerHeight() {
  if(window.innerHeight){
    wininnerHeight = window.innerHeight;
  }
  document.form1.innerHeight.value = wininnerHeight;
 }

 function getPageScale(){
    if (typeof pageWidth !== "number") {
       if (document.compatMode === "CSS1Compat") {
           winpageWidth = document.documentElement.clientWidth;
           winpageHeight = document.documentElement.clientHeight;
       }else{
           winpageWidth = document.body.clientWidth;
           winpageHeight = document.body.clientHeight;
        }
    }
    document.form1.pageWidth.value = winpageWidth;
    document.form1.pageHeight.value = winpageHeight;
 }


getEleHeight();
getEleWidth();
findDimensions();
getOffsetWidth();
getOffsetHeight();
getScrollWidth();
getScrollHeight();
getScrollLeft();
getScrollTop();
getScreenTop();
getScreenLeft();
getWinheight();
getWinwidth();
getWinavailHeight();
getWinavailwidth();
getWincolorDepth();
getWindeviceXDPI();
getPageScale();
getWininnerWidth();
getWininnerHeight();
//调用函数，获取数值

window.onresize=getEleHeight;
window.onresize=getEleWidth;
window.onresize=getOffsetWidth;
window.onresize=getOffsetHeight;
window.onresize=getScrollWidth;
window.onresize=getScrollHeight;
window.onresize=getScrollLeft;
window.onresize=getScrollTop;
window.onresize=getScreenTop;
window.onresize=getScreenLeft;
window.onresize=getWinheight;
window.onresize=getWinwidth;
window.onresize=getWinavailHeight;
window.onresize=getWinavailwidth;
window.onresize=findDimensions;
window.onresize=getWincolorDepth;
window.onresize=getWindeviceXDPI;
window.onresize=getPageScale;
window.onresize=getWininnerWidth;
window.onresize=getWininnerHeight;

</script>
</body>
</html>

　　getPage.html

参考菜鸟教程：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div id="demo"></div>

<script>
var txt = "";
txt += "<p>innerWidth: " + window.innerWidth + "</p>";
txt += "<p>innerHeight: " + window.innerHeight + "</p>";
txt += "<p>outerWidth: " + window.outerWidth + "</p>";
txt += "<p>outerHeight: " + window.outerHeight + "</p>";

document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

getPageScale()方法获取浏览器视口大小

<!DOCTYPE >
<html>
<body>
<script type="text/javascript">
  function getPageScale(){
     var pageWidth = window.innerWidth,
         pageHeight = window.innerHeight;
 
     if (typeof pageWidth !== "number") {
         if (document.compatMode === "CSS1Compat") {
             pageWidth = document.documentElement.clientWidth;
             pageHeight = document.documentElement.clientHeight;
         }else{
             pageWidth = document.body.clientWidth;
             pageHeight = document.body.clientHeight;
         }
     }
 
     return {pageWidth, pageHeight};
 }
function getInfo(){ 
     var s = "";
      s += " document.documentElement.clientWidth ==> 可见区域宽度 "+ document.documentElement.clientWidth+"<br>";
      s += " document.documentElement.clientHeight ==> 可见区域高度 "+ document.documentElement.clientHeight+"<br>";
      s += " 网页可见区域宽："+ document.body.clientWidth+"<br>";    
      s += " 网页可见区域高："+ document.body.clientHeight+"<br>";    
      s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线的宽)"+"<br>";    
      s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的高)"+"<br>";    
      s += " 网页正文全文宽："+ document.body.scrollWidth+"<br>";    
      s += " 网页正文全文高："+ document.body.scrollHeight+"<br>";    
      s += " 网页被卷去的高："+ document.body.scrollTop+"<br>";      
      s += " 网页被卷去的左："+ document.body.scrollLeft+"<br>";    
      s += " 网页正文部分上："+ window.screenTop+"<br>";    
      s += " 网页正文部分左："+ window.screenLeft+"<br>";    
      s += " 屏幕分辨率的高："+ window.screen.height+"<br>";    
      s += " 屏幕分辨率的宽："+ window.screen.width+"<br>";    
      s += " 屏幕可用工作区高度："+ window.screen.availHeight+"<br>";    
      s += " 屏幕可用工作区宽度："+ window.screen.availWidth+"<br>";    
      s += " 屏幕设置："+ window.screen.colorDepth +" 位彩色"+"<br>";    
      s += " 屏幕设置："+ window.screen.deviceXDPI +" 像素/英寸"+"<br>";
      s += " window.innerWidth："+ window.innerWidth+"<br>";
      s += " window.innerHeight："+ window.innerHeight+"<br>";
      s += " getPageScale().pageWidth："+ getPageScale().pageWidth+"<br>";
      s += " getPageScale().pageHeight："+ getPageScale().pageHeight+"<br>";
      document.write(s);
    }
    getInfo();
    getPageScale()
  </script>
  </body>
  </html>

　　

标签：body,网页,documentElement,分辨率,JS,window,屏幕,document,screen
From： https://www.cnblogs.com/fengjingfei/p/16665095.html

相关文章

  • 前端JS-Day22
    箭头函数不创建this对象！图片无缝衔接：保证轮播图到最后直接跳转到第一位。 进行轮播图自动播放的时候，可以采取手动调用点击事件的方式操作。window.addEventListene......
  • JS版数据结构-链表
    链表代码随笔（JS）/**链表节点*/classNode{el=null;next=null;constructor(el=null,next=null){this.el=el;this.next=next;}}......
  • array.js 说明
    文件说明：数组操作集合引入代码：import$arrayfrom'@/common/js/array.js'varlists=['桌子','椅子','电视','空调','冰箱']//从数组中随机抽取二个元素varg......
  • js实现当前时间年-月-日 时-分-秒
    1.对Date的扩展，将Date转化为指定格式的String1.(newDate()).Format("yyyy-MM-ddhh:mm:ss.S")==>2006-07-0208:09:04.4232.(newDate()).Format("yyyy-M-dh:m:s.S......
  • 【面试题】JS实现数组扁平化处理，妙不可言啊！
    JS实现数组扁平化处理点击打开视频讲解更加详细期望结果：将数组扁平化并去重最终得到一个升序且不重复的数组步骤：1、数组扁平化2、去重......
  • 2022-09-07 wx.getLocation暂未配置在app.json且没有权限
    前言：昨晚提交了小程序审核，当即就被驳回了，原因是：wx.getLocation接口无权限，且没有在app.json中配置注：我的是wepy小程序解决方案：找到app.wpy，在里面添加代码如下：required......
  • feign 发送form mata数据类型 调用不通问题，JSON parse error Illegal character ((C
    调用方式@FeignClient(name="remoteUserManagerService",url="${base.url}")publicinterfaceRemoteUserManagerService{/***验证token是否正确......
  • js桶排序
    **桶排序**核心思想：对数据进行分桶（分组）,分桶后对桶中数据进行排序(可以使用自己喜欢的方式)，然后再将所有桶合并（数组合并）。公式：划分桶的数量（数组中最大值-最小......
  • qt中json字符串的读写
    1、json字符串： 2、写json：  3读json：  ......
  • React 中的数据可视化与 D3.js
    React中的数据可视化与D3.js当我想在Web应用程序上可视化数据时，我首选的环境是在React应用程序中使用d3.js。但这两种技术很难结合起来。原因是他们都想处理DOM......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99