我想让我的访问者能够看到高质量的图像,有什么方法可以检测窗口的大小吗?
或者更好的是,JavaScript浏览器的视口大小?见此处绿色区域:
我想让我的访问者能够看到高质量的图像,有什么方法可以检测窗口的大小吗?
或者更好的是,JavaScript浏览器的视口大小?见此处绿色区域:
当前回答
我在O'Reilly的《JavaScript: The definitive Guide》第6版中找到了一个明确的答案,第391页:
这个解决方案即使在Quirks模式下也能工作,而ryanve和ScottEvernden目前的解决方案则不能。
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"),一切看起来都很好。
其他回答
我找到了一个跨浏览器的方法:
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; } <!DOCTYPE html> <html> <body onresize="myFunction()" onload="myFunction()"> <p> Try to resize the page. </p> <p id="demo"> </p> </body> </html>
跨浏览器@media (width)和@media (height)值
const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
窗口。innerWidth和window.innerHeight
获取包含滚动条的CSS viewport @media (width)和@media (height) initial-scale和缩放变化可能会导致移动值错误地缩小到PPK所称的可视视口,并且小于@media值 由于本机舍入,缩放可能导致值相差1px IE8-未定义
document.documentElement.clientWidth和.clientHeight
等于CSS视口宽度减去滚动条宽度 当没有滚动条时,匹配@media (width)和@media (height) 与jQuery(window).width()相同,jQuery调用浏览器视口 提供跨浏览器 如果缺少doctype则不准确
资源
各种维度的实时输出 Verge使用跨浏览器视口技术 实际使用matchMedia来获得任何单位的精确尺寸
符合W3C标准的解决方案是创建一个透明的div(例如使用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将是不可见的,但会消耗一些空间,这将导致出现滚动条等。
用于动态检测尺寸
你可以这样做在本地,没有Jquery或额外的
console.log('height默认值:'+window.visualViewport.height) console.log('width default:'+window.visualViewport.width) window.addEventListener(“调整”,(e) = > { console.log(' width: ${e.t target. visualviewport .width}px '); console.log(' height: ${e.t target. visualviewport .height}px '); });
您可以简单地使用JavaScript window.matchMedia()方法根据CSS媒体查询检测移动设备。这是检测移动设备的最佳和最可靠的方法。
下面的例子将告诉你这个方法是如何工作的:
<script>
$(document).ready(function(){
if(window.matchMedia("(max-width: 767px)").matches){
// The viewport is less than 768 pixels wide
alert("This is a mobile device.");
} else{
// The viewport is at least 768 pixels wide
alert("This is a tablet or desktop.");
}
});
</script>