如何获得所有主流浏览器的屏幕、当前网页和浏览器窗口的大小？

如何获得适用于所有主流浏览器的屏幕、当前网页和浏览器窗口的大小？windowWidthwindowHeightpageWidthpageHeightscreenWidthscreenHeightpageXpageYscreenXscreenY

分割线

网友回答：

这包含您需要了解的所有内容：获取视口/窗口大小

但简而言之：

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);

分割线

网友回答：

您可以使用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;

分割线

网友回答：

这是一个使用纯JavaScript的跨浏览器解决方案（来源）：

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

模板简介：该模板名称为【如何获得所有主流浏览器的屏幕、当前网页和浏览器窗口的大小？】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。