使用JavaScript获取浏览器视口尺寸

我想为我的访问者提供以高质量查看图像的能力,有没有什么方法可以检测到窗口大小?

或者更好的是,JavaScript的浏览器的视口大小? 在这里看到绿地:

跨浏览器 @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.innerHeight

  • 获取包含滚动条的CSS视口 @media (width)@media (height)
  • initial-scale和缩放变化可能会导致移动值错误地缩小到PPK所称的视觉视口,并小于@media
  • 由于本地舍入,缩放可能会导致值为1px
  • undefined在IE8-

document.documentElement.clientWidth.clientHeight

  • 等于CSS视口宽度减去滚动条宽度
  • 没有滚动条时匹配@media (width)@media (height)
  • 与 jQuery 调用浏览器视口的jQuery(window).width() 相同
  • 可用的跨浏览器
  • 如果文档缺失,则不准确

资源

  • 实时输出各种尺寸
  • 边缘使用跨浏览器视口技术
  • 实际使用matchMedia来获取任何单位的精确尺寸

jQuery维度函数

$(window).width()$(window).height()

你可以使用window.innerWidth和window.innerHeight属性。

innerHeight vs outerHeight

如果你不使用jQuery,它会变得丑陋。 这是一个适用于所有新浏览器的片段。 IE中Quirks模式和标准模式的行为是不同的。 这照顾它。

 var elem = (document.compatMode === "CSS1Compat") ? document.documentElement : document.body; var height = elem.clientHeight; var width = elem.clientWidth; 

我知道这有一个可以接受的答案,但我遇到了一种情况,clientWidth不起作用,因为iPhone(至less是我的)返回980,而不是320,所以我用window.screen.width。 我正在做现有的网站“响应”,并需要强制更大的浏览器使用不同的元视口。

希望这有助于某人,它可能不是完美的,但它在我对iOs和Android的testing。

 //sweet hack to set meta viewport for desktop sites squeezing down to mobile that are big and have a fixed width //first see if they have window.screen.width avail (function() { if (window.screen.width) { var setViewport = { //smaller devices phone: 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no', //bigger ones, be sure to set width to the needed and likely hardcoded width of your site at large breakpoints other: 'width=1045,user-scalable=yes', //current browser width widthDevice: window.screen.width, //your css breakpoint for mobile, etc. non-mobile first widthMin: 560, //add the tag based on above vars and environment setMeta: function () { var params = (this.widthDevice <= this.widthMin) ? this.phone : this.other; var head = document.getElementsByTagName("head")[0]; var viewport = document.createElement('meta'); viewport.setAttribute('name','viewport'); viewport.setAttribute('content',params); head.appendChild(viewport); } } //call it setViewport.setMeta(); } }).call(this); 

我能够在JavaScript中find明确的答案:The Definitive Guide,第6版,O'Reilly, 391:

这种解决scheme即使在Quirks模式下也能正常工作,而ryanve和ScottEvernden目前的解决scheme则不能。

 function getViewportSize(w) { // Use the specified window or the current window if no argument w = w || window; // This works for all browsers except IE8 and before if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight }; // For IE (or any browser) in Standards mode var d = w.document; if (document.compatMode == "CSS1Compat") return { w: d.documentElement.clientWidth, h: d.documentElement.clientHeight }; // For browsers in Quirks mode return { w: d.body.clientWidth, h: d.body.clientHeight }; } 

除了事实,我不知道为什么行if (document.compatMode == "CSS1Compat")不是if (d.compatMode == "CSS1Compat") ,一切看起来不错。

window.innerHeightdocument.documentElement.clientHeight是有区别的。 第一个包括水平滚动条的高度。

此代码来自http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

 function viewport() { var e = window, a = 'inner'; if (!('innerWidth' in window )) { a = 'client'; e = document.documentElement || document.body; } return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; } 

注意:要读取宽度,请使用console.log('viewport width'+viewport().width);

如果您正在寻找在移动设备上的虚拟像素中提供正确值的非jQuery解决scheme,并且您认为使用简单的window.innerHeightdocument.documentElement.clientHeight可以解决您的问题,请首先研究此链接: http:// tripleodeon。 COM /可湿性粉剂内容/上传/ 2011/12 / table.html

开发人员已经做了很好的testing,揭示了这个问题:Android / iOS,横向/纵向,正常/高密度显示器可以获得意想不到的值。

我目前的答案不是silverlight的子弹(// todo),而是对那些将要从这个线程快速复制粘贴到生产代码的人的警告。

我正在寻找手机上的虚拟像素的页面宽度,我发现唯一的工作代码是(意外的!) window.outerWidth 。 当我有时间的时候,我会在后面检查这个表格,给出排除导航栏的正确解决scheme。

符合W3C标准的解决scheme是创build一个透明的div(例如dynamic的使用JavaScript),将其宽度和高度设置为100vw / 100vh(Viewport单位),然后得到它的offsetWidth和offsetHeight。 之后,元素可以再次被移除。 这在旧版浏览器中不起作用,因为这些视口单元是相对较新的,但是如果您不关心它们,而是关于(即将成为)标准,那么您绝对可以这样做:

 var objNode = document.createElement("div"); objNode.style.width = "100vw"; objNode.style.height = "100vh"; document.body.appendChild(objNode); var intViewportWidth = objNode.offsetWidth; var intViewportHeight = objNode.offsetHeight; document.body.removeChild(objNode); 

当然,你也可以设置objNode.style.position =“fixed”,然后使用100%宽度/高度 – 这应该有相同的效果,并在一定程度上提高兼容性。 另外,将位置设置为固定可能是一个好主意,因为否则div将是不可见的,但会消耗一些空间,这将导致出现滚动条等等。

我看了看,发现一个跨浏览器的方式:

 <!DOCTYPE html> <html> <head> <script> function myFunction() { if(window.innerWidth !== undefined && window.innerHeight !== undefined) { var w = window.innerWidth; var h = window.innerHeight; } else { var w = document.documentElement.clientWidth; var h = document.documentElement.clientHeight; } var txt = "Page size: width=" + w + ", height=" + h; document.getElementById("demo").innerHTML = txt; } </script> </head> <body onresize="myFunction()" onload="myFunction()"> <p> Try to resize the page. </p> <p id="demo"> &nbsp; </p> </body> </html> 

这是我这样做的方式,我在IE 8 – > 10,FF 35,Chrome 40中试过,它在所有现代浏览器(如window.innerWidth定义)和IE 8(无窗口) innerWidth),它也工作顺利,任何问题(如溢出,因为溢出:“隐藏”),请报告。 我并没有真正对视口高度感兴趣,因为我只是为了解决一些响应式工具而做了这个function,但它可能会被实现。 希望它有帮助,我感谢意见和build议。

 function viewportWidth () { if (window.innerWidth) return window.innerWidth; var doc = document, html = doc && doc.documentElement, body = doc && (doc.body || doc.getElementsByTagName("body")[0]), getWidth = function (elm) { if (!elm) return 0; var setOverflow = function (style, value) { var oldValue = style.overflow; style.overflow = value; return oldValue || ""; }, style = elm.style, oldValue = setOverflow(style, "hidden"), width = elm.clientWidth || 0; setOverflow(style, oldValue); return width; }; return Math.max( getWidth(html), getWidth(body) ); }