Chrome 设备模式下的 window.innerWidth [英] window.innerWidth in Chrome's device mode
问题描述
在谷歌浏览器的设备模式下，window.innerWidth 返回什么?它是设备的视口(加上任何滚动条)吗?
When in google chrome's device mode, what does window.innerWidth return? Is it the viewport of the device (plus any scroll bars)?
我得到了不同的设备宽度 x 高度值(页面顶部的尺寸 - 设备的视口?)和 window.innerWidth x window.innerHeight(浏览器的视口?).这是应该发生的吗?
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 和 innerHeight 返回视觉视口的尺寸.在桌面浏览器中，这通常是浏览器的窗口尺寸.在移动设备上，由于捏合缩放，情况有点复杂.
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.
当您加载没有 <meta name="viewport"> 标记的页面时，将使用默认布局宽度(例如 Chrome 使用 980px).当浏览器加载页面时，它会最大程度地缩小.看起来您上面的设备尺寸的宽度为 425 像素，因此当页面加载时浏览器会缩小以查看整个 980 像素.如果您的内容比这更宽(例如您的图像)，它会进一步缩小.看看你的 window.innerWidth 是 1248，这意味着大约 30% 的比例因子.
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 反映视口，应用捏合缩放系数，页面加载完全缩小.
tl;dr: innerWidth/innerHeight reflect viewport with the pinch-zoom factor applied and the page is loaded fully zoomed out.
此后在 Chrome 中发生了变化.window.innerWidth 现在返回 layout viewport 宽度.要获取视觉视口宽度，请使用 window.visualViewport.width.有关详细信息，请参阅这篇文章.
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屋！
