javascript - 使用JavaScript获取浏览器视口尺寸(Get the browser viewport dimensions with JavaScript)

Question

I want to provide my visitors the ability to see images in high quality, is there any way I can detect the window size? (我想为访问者提供观看高质量图像的能力，有什么方法可以检测窗口大小吗？)

Or better yet, the viewport size of the browser with JavaScript? (或者更好的是，使用JavaScript的浏览器的视口大小？) See green area here: (在此处查看绿色区域：)

  ask by Alix Axel translate from so

Answer 1

Cross-browser) @media (width) and @media (height) values (跨浏览器的) @media (width)和@media (height)值)

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.innerWidth and .innerHeight (window.innerWidth和.innerHeight)

• gets CSS viewport @media (width) and @media (height) which include scrollbars (获取CSS视口 @media (width)和@media (height) ，其中包括滚动条)
• initial-scale and zoom variations may cause mobile values to wrongly) scale down to what PPK calls the visual viewport and be smaller than the @media values (initial-scale和缩放变化可能会导致移动值错误地)缩小到PPK称为可视视口的值，并且小于@media值)
• zoom may cause values to be 1px off due to native rounding (缩放可能会由于本机舍入而导致值偏离1像素)
• undefined in IE8- (在IE8中undefined)

document.documentElement.clientWidth and .clientHeight (document.documentElement.clientWidth和.clientHeight)

• equals CSS viewport width minus scrollbar width (等于CSS视口宽度减去滚动条宽度)
• matches @media (width) and @media (height) when there is no scrollbar (没有滚动条时，匹配@media (width)和@media (height))
• same as jQuery(window).width() which jQuery calls the browser viewport (与 jQuery(window).width() 相同，后者将jQuery 称为浏览器视口)
• available cross-browser (可用的跨浏览器)
• inaccurate if doctype is missing (如果缺少文档类型，则不正确)

Resources (资源资源)

• Live outputs for various dimensions (各种尺寸的实时输出)
• verge) uses cross-browser viewport techniques (边缘)使用跨浏览器视口技术)
• actual) uses matchMedia to obtain precise dimensions in any unit (实际)使用matchMedia获取任何单位的精确尺寸)