Chrome设备模式下的window.innerWidth [英] window.innerWidth in Chrome's device mode
问题描述
在google chrome的设备模式下，window.innerWidth会返回什么？它是设备的视口（加上任何滚动条）？
我得到设备宽度x高度的不同值（页面顶部的尺寸 - 设备的视口？）和window.innerWidth x window.innerHeight（浏览器的视口？）。这是应该发生的？
下面是我得到的图片和我使用的代码。
<！doctype html>
< html>
< head>< / head>
< body>
< script>
var image;
window.onload = function（）{
image = document.getElementById（img）;
checkWindowSize（）;
window.addEventListener（'resize'，function（event）{
checkWindowSize（）;
}）;
函数checkWindowSize（）{
var width = window.innerWidth，
height = window.innerHeight;
console.log（window.innerHeight：，window.innerHeight，window.innerWidth：，window.innerWidth）;
}
< / script>
< / body>
< / html>
window.innerWidth 和 innerHeight 返回可视视口的尺寸。在桌面浏览器中，这通常是浏览器的窗口尺寸。
当你加载一个没有< meta name =viewport的页面时， > 标记，则会使用默认布局宽度（例如Chrome使用980像素）。当浏览器加载页面时，它会最大限度地缩小页面。它看起来像上面的设备尺寸的宽度为425px，所以当浏览器加载页面时，浏览器会缩小以查看整个980像素。如果您的内容比此更广泛（例如您的图片），则会进一步缩小。看到你的 window.innerWidth 是1248，这意味着一个比例因子约为30％。 tl; dr： innerWidth / innerHeight 反映了应用了捏缩放因子的视口，并且页面被完全缩小了。
编辑：这已经改变了铬。 window.innerWidth 现在返回宽度为布局视口的宽度。要获得可视视口宽度，请使用 window.visualViewport.width 。有关详情，请参见这篇文章。
When in google chrome's device mode, what does window.innerWidth return? Is it the viewport of the device (plus any scroll bars)?
I'm getting different values for the device's width x height (the dimensions on top of the page - the device's viewport?) and window.innerWidth x window.innerHeight (browser's viewport?). Is this supposed to happen?
Here's a picture of what I'm getting, and the code I used.
<!doctype html>
<html>
<head></head>
<body>
<script>
var image;
window.onload = function() {
image = document.getElementById("img");
checkWindowSize();
window.addEventListener('resize', function(event){
checkWindowSize();
});
}
function checkWindowSize() {
var width = window.innerWidth,
height = window.innerHeight;
console.log("window.innerHeight: ", window.innerHeight, " window.innerWidth: ", window.innerWidth);
}
</script>
<img id="img" class="vid-img-filter" src="http://i.imgur.com/jkhFJMn.jpg" alt="">
</body>
</html>
window.innerWidth and innerHeight return the dimensions of the visual viewport. In desktop browsers, this is generally the browser's window dimensions. On mobile the situation is a bit more complicated because of pinch zoom.
When you load a page without a <meta name="viewport"> tag, a default layout width is used (e.g. Chrome uses 980px). When the browser loads the page it does so maximally zoomed out. It looks like your device size above has a width of 425px so the browser zooms out when the page is loaded to see the whole 980px. If you have content that's wider than this (e.g. your image) it'll zoom out even further. Seeing as how your window.innerWidth is 1248, that implies a scale factor of about 30%.
tl;dr: innerWidth/innerHeight reflect viewport with the pinch-zoom factor applied and the page is loaded fully zoomed out.
EDIT: This has since changed in Chrome. window.innerWidth now returns the layout viewport width. To get the visual viewport width, use window.visualViewport.width. See this article for more details.
这篇关于Chrome设备模式下的window.innerWidth的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
