JavaScript获取屏幕高度和宽度等信息

我们可以通过内置的document和window获取屏幕的一些属性，如高度、宽度等信息。

网页可见区域宽： 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

示例：

<script language="javascript">
function screenInfo(){var  s = "";s += "\r\n网页可见区域宽："+ document.body.clientWidth;s += "\r\n网页可见区域高："+ document.body.clientHeight;s += "\r\n网页可见区域宽："+ document.body.offsetWidth  +" (包括边线的宽)";s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";s += "\r\n网页正文全文宽："+ document.body.scrollWidth;s += "\r\n网页正文全文高："+ document.body.scrollHeight;s += "\r\n网页被卷去的高："+ document.body.scrollTop;s += "\r\n网页被卷去的左："+ document.body.scrollLeft;s += "\r\n网页正文部分上："+ window.screenTop;s += "\r\n网页正文部分左："+ window.screenLeft;s += "\r\n屏幕分辨率的高："+ window.screen.height;s += "\r\n屏幕分辨率的宽："+ window.screen.width;s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;alert(s);
}
</script>

详见：https://codepen.io/yansheng836/pen/bGjEwVe

参考：https://www.cnblogs.com/liuzijing688/archive/2008/01/12/1035920.html

JavaScript获取屏幕高度和宽度等信息相关推荐

android屏幕密度高度,Android获取常用辅助方法(获取屏幕高度、宽度、密度、通知栏高度、截图)...
我们需要获取Android手机或Pad的屏幕的物理尺寸,以便于界面的设计或是其他功能的实现.下面就分享一下Android中常用的一些辅助方法: 获取屏幕高度: /** * 获得屏幕高度 * @para ...
js和jQuery 获取屏幕高度、宽度
js获取屏幕高度,宽带网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body ...
jQuery 获取屏幕高度、宽度
做手机Web开发做浏览器兼容用到了,所以在网上找了些汇总下. alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height() ...
关于js获取屏幕高度和宽度（ window.document.body，window.screen）(PC端和移动端)
在使用JS的时候经常遇到的问题就是我需要获取当前屏幕的宽度和高度.每每到这个时候不知道使用哪个: widow.document.body.offsetWidth; window.screen.avai ...
聊聊获取屏幕高度这件事
问题的起因是我发现 PopupWindow弹出位置不正确时发现的.其实早在两年多前,我就发现我手上的小米MIX2s 获取屏幕高度不正确,后面参考V2EX 的这篇帖子处理了.最近又一次做到类似功能,发现 ...
华为手机获取状态栏高度是错误的_聊聊获取屏幕高度这件事
问题的起因是我发现 PopupWindow弹出位置不正确时发现的.其实早在两年多前,我就发现我手上的小米MIX2s 获取屏幕高度不正确,后面参考V2EX 的这篇帖子处理了.最近又一次做到类似功能,发现 ...
android如何获取分屏区域的宽高,Android N获取屏幕高度的问题
获取屏幕高度的代码 int getScreenHeight(Activity context) { WindowManager wm = (WindowManager)context.getSyste ...
获取屏幕高度——浏览器高度、控制台高度、工具栏高度
今天想写一个效果,进入网站顶部导航栏需要一个全屏背景图,这个需要根据不同的屏幕大小适应不同的高度(不能使用height为100%,这个涉及到最外层容器的高度,容易造成高度塌陷),所以需要一个确定高度值 ...
Android 获取屏幕高度，虚拟导航键检测
本篇文章主要总结一下在全面屏上获取高度的问题. 获取屏幕高度一般 Android 上获取设备的高度都是通过 DefaultDisplay 的方式来获取的如下: public int getScree ...

JavaScript获取屏幕高度和宽度等信息

JavaScript获取屏幕高度和宽度等信息相关推荐

最新文章

热门文章