如何获得浏览器视口尺寸？ [英] How to get the browser viewport dimensions?

问题描述

我想为访问者提供观看高质量图像的能力，有什么方法可以检测到窗口大小吗？

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:

推荐答案

< h2> 跨浏览器 @media（宽度） 和 @media（高度） 值

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

const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)

window.innerWidth 和 window.innerHeight

• 获取 CSS视口 @media（宽度）和 @media（高度），其中包括滚动条


• 初始比例并缩放变化可能会导致移动值错误地 缩小为PPK称为视觉视口，并且小于 @media 值


• 由于本地舍入，缩放可能导致值降低1px


• < IE8中的code>未定义-



window.innerWidth and window.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（宽度）和 @media（高度），如果没有没有滚动条


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


• < a href = http://www.quirksmode.org/mobile/tableViewport.html rel = noreferrer>可用的跨浏览器


• 如果缺少文档类型，则不准确


• 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
• inaccurate if doctype is missing


• 各种尺寸的实时输出


• verge 使用跨浏览器视口技术


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


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

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