使用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属性。
如果你不使用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.innerHeight和document.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.innerHeight或document.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"> </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) ); }
