使用JavaScript获取浏览器视口尺寸 [英] Get the browser viewport dimensions with JavaScript

问题描述

我想为访问者提供以高质量查看图片的功能，是否有任何方法可以检测窗口大小？

I want to provide my visitors the ability to see images in high quality, is there any way I can detect the window size?

或者更好的是，使用JavaScript的浏览器大小？在此处查看绿色区域：

Or better yet, the viewport size of the browser with JavaScript? See green area here:

推荐答案

跨浏览器 @media （width） 和 @media（height） 值 

Cross-browser @media (width) and @media (height) values 

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

window.innerWidth 和 .innerHeight

• 获取 CSS viewport @media（width）和 @media height 其中包括滚动条


• initial-scale 并缩放变体可能导致移动值错误地缩小到PPK调用视觉视口，并小于 @media 值


• 放大可能会导致值由于本地舍入而导致的1px off


• undefined



window.innerWidth and .innerHeight

• gets CSS viewport @media (width) and @media (height) which include scrollbars
• 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
• zoom may cause values to be 1px off due to native rounding
• undefined in IE8-


• 等于CSS视口宽度减去滚动条宽度


• 当否匹配 @media（width）和 @media（height） scrollbar


• 与 相同jQuery（window）.width（）其中 jQuery 浏览器视口


• 可用的跨浏览器


• equals CSS viewport width minus scrollbar width
• matches @media (width) and @media (height) when there is no scrollbar
• same as jQuery(window).width() which jQuery calls the browser viewport
• available cross-browser


• 各种尺寸的即时输出


• verge 使用cross -browser视口技术


• 实际 使用 matchMedia 在任何单位获得精确的尺寸


• Live outputs for various dimensions
• verge uses cross-browser viewport techniques
• actual uses matchMedia to obtain precise dimensions in any unit

这篇关于使用JavaScript获取浏览器视口尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！