我怎样才能得到windowWidth, , windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX,screenY它适用于所有主要浏览器？
获取屏幕大小、当前网页和浏览器窗口
IT技术
javascript
html
jquery
layout
cross-browser
2021-01-19 23:23:18
6个回答
您可以使用 jQuery 获取窗口或文档的大小：
// Size of browser viewport.
$(window).height();
$(window).width();
// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();
对于屏幕大小，您可以使用screen对象：
window.screen.height;
window.screen.width;
这有你需要知道的一切：获取视口/窗口大小
但简而言之：
var win = window,
doc = document,
docElem = doc.documentElement,
body = doc.getElementsByTagName('body')[0],
x = win.innerWidth || docElem.clientWidth || body.clientWidth,
y = win.innerHeight|| docElem.clientHeight|| body.clientHeight;
alert(x + ' × ' + y);
请停止编辑此答案。它已经被不同的人编辑了 22 次以匹配他们的代码格式偏好。还有人指出，如果您只想针对现代浏览器，则不需要这样做 - 如果是这样，您只需要以下内容：
const width = window.innerWidth || document.documentElement.clientWidth ||
document.body.clientWidth;
const height = window.innerHeight|| document.documentElement.clientHeight||
document.body.clientHeight;
console.log(width, height);
这是一个使用纯JavaScript ( Source )的跨浏览器解决方案：
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
一种获取可用屏幕尺寸的非 jQuery 方法。window.screen.width/height已经提出，但为了响应式网页设计和完整性的缘故，我认为值得一提的是这些属性：
alert(window.screen.availWidth);
alert(window.screen.availHeight);
http://www.quirksmode.org/dom/w3c_cssom.html#t10：
AvailWidth和availHeight - 屏幕上的可用宽度和高度（不包括操作系统任务栏等）。
但是当我们谈论响应式屏幕时，如果我们出于某种原因想使用 jQuery 来处理它，
window.innerWidth, window.innerHeight
给出正确的测量值。即使它删除了滚动条的额外空间，我们也无需担心调整该空间:)