js - 以像素为单位获取客户端的窗口尺寸（显示器分辨率）[重复]答案

【问题标题】：js - get client's window dimension (monitor resolution) in pixel [duplicate]js - 以像素为单位获取客户端的窗口尺寸（显示器分辨率）[重复]
【发布时间】：2014-03-20 09:13:31
【问题描述】：

为了设计一个精确的网络界面，我需要在客户访问我的网站时使用 javascript 获取他们的显示器分辨率。这可能吗？

【问题讨论】：

谢谢。浏览器的尺寸如何？你能帮我解决这个问题吗？
如果您仔细阅读所有答案和cmets，它在上面提到的同一个问题。对于 JQuery，它是 $(window).height() 和 $(window).width()。对于普通 JS，请在此处编写自己的 wndsize() stackoverflow.com/a/9237810/643500

标签： javascript css resolution

【解决方案1】：

这是一个代码：

 document.write("Available Width: " + screen.availWidth);
document.write("Available Height: " + screen.availHeight);

来源：http://www.w3schools.com/js/js_window_screen.asp

无法评论，但这里是浏览器高度的解决方案：

window.innerHeight/Width

由大多数浏览器提供，但不是 Internet Explorer 8-，甚至在 Internet Explorer 9+ 中，它在 quirks 模式下也不可用。

document.body.clientHeight/Width

由许多浏览器提供，包括 Internet Explorer。

document.documentElement.clientHeight/Width

由大多数 DOM 浏览器提供，包括 Internet Explorer。

来源： http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

【讨论】：

【解决方案2】：

对于您的问题的简单回答，只需查看 screen.height 或 screen.width.

例如

window.screen.height

window.screen.width

对于浏览器尺寸，您可以简单地使用 window.height 或 window.width

如果您正在考虑根据可用空间更改设计/布局，您想查看 media queries 或使用像 Bootstrap、Foundation 或 Skel.js 这样的框架引入对 responsiveness 的更易于访问的控制。

Media Queries 是一个 CSS3 模块，允许内容呈现适应屏幕分辨率等条件（例如智能手机与高定义屏幕）。它于 2012 年 6 月成为 W3C 推荐标准。并且是响应式网页设计的基石技术。

[...]

响应式网页设计 (RWD) 是一种网页设计方法，旨在打造网站提供最佳的观看体验 - 易于阅读和以最少的调整大小、平移和滚动进行导航——跨越广泛的设备（从手机到台式电脑监视器）

【讨论】：