关于js获取屏幕高度和宽度（ window.document.body，window.screen）(PC端和移动端)

在使用JS的时候经常遇到的问题就是我需要获取当前屏幕的宽度和高度。每每到这个时候不知道使用哪个：

widow.document.body.offsetWidth;
window.screen.availWidth;
window.screen.width;

一上图（PC端）为例，

A区域表示的网页的区域（屏幕下面虚线地方表示的是网页可以滑动的区域）：widow.document.body.offsetWidth*window.document.body.offsetHeight。

B区域表示的是可用区域（有网上的叫做空白区域）也就是显示的屏幕除掉上面的工具栏（浏览器的标签）和下面的工具栏（电脑的菜单）。注意的是滑动栏是属于可用区域的： window.screen.availWidth*window.screen.availHeight。

C区域表示的是显示器的宽和高，也就是电脑的分辨率：window.screen.Width*window.screen.Height。

所以window.screen.Width= window.screen.availWidth

假如是移动设备，由于没有显示滑动条，所以window.screen.Width= window.screen.availWidth=widow.document.body.offsetWidth，至于高度的话含义和电脑端是一样的。

PS：若想是的页面中的某个元素（Canvas之类的）匹配移动设备的屏幕高宽，可以使用以下代码：

<meta name="viewport" content="width=device-width; initial-scale=1.0">
<meta name="viewport" content="height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

关于js获取屏幕高度和宽度（ window.document.body，window.screen）(PC端和移动端)相关推荐

js和jQuery 获取屏幕高度、宽度
js获取屏幕高度,宽带网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body ...
android屏幕密度高度,Android获取常用辅助方法(获取屏幕高度、宽度、密度、通知栏高度、截图)...
我们需要获取Android手机或Pad的屏幕的物理尺寸,以便于界面的设计或是其他功能的实现.下面就分享一下Android中常用的一些辅助方法: 获取屏幕高度: /** * 获得屏幕高度 * @para ...
jQuery 获取屏幕高度、宽度
做手机Web开发做浏览器兼容用到了,所以在网上找了些汇总下. alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height() ...
JavaScript获取屏幕高度和宽度等信息
我们可以通过内置的document和window获取屏幕的一些属性,如高度.宽度等信息. 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.bo ...
js获取屏幕高度宽度分辨率问题，当css3的@media查询写法不能解决问题时请看这个
当css的@media查询写法如下: @media screen and (max-width: 1920px) { .feature-table { height: 980px;backgr ...
javascript 中的window, document, screen都有什么区别？
谷歌之后,从stackoverflow上找到的高赞答案: https://stackoverflow.com/questions/9895202/what-is-the-difference-betw ...
JS中window.document对象
小知识点注:外面双引号,里面的双引号改为单引号: 在div里面行高设置和整个外面高度一样,才能用竖直居中,居中是行居中文本框取出来 ...
js中DOM, DOCUMENT, BOM, WINDOW 区别
全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js中DOM, DOCUMENT, BOM, WINDOW 区别 DOM 全称是 Document ...
Selenium Webdriver 的使用java执行js代码解决 ScriptEngine不支持浏览器内置对象window,document的问题
问题场景: 使用java 掉用js代码,发现 ScriptEngine不支持浏览器内置对象window,document的问题: 问题一:为什么要用java掉用js代码? 比如在抓取(爬取)对方网 ...

关于js获取屏幕高度和宽度（ window.document.body，window.screen）(PC端和移动端)

关于js获取屏幕高度和宽度（ window.document.body，window.screen）(PC端和移动端)相关推荐

最新文章

热门文章