Chrome的设备模式中的window.innerWidth
jon*_*mez 11 mobile google-chrome viewport
在谷歌浏览器的设备模式下,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();
});
}
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>
Dav*_*kan 35
window.innerWidth并innerHeight返回可视视口的尺寸.在桌面浏览器中,这通常是浏览器的窗口尺寸.在移动设备上,由于捏缩放,情况有点复杂.
加载没有<meta name="viewport">标记的页面时,会使用默认布局宽度(例如,Chrome使用980px).当浏览器加载页面时,它会最大限度地缩小.看起来您的设备尺寸宽度为425px,因此浏览器会在加载页面时缩小以查看整个980px.如果你的内容比这个更宽(例如你的图像),它会进一步缩小.看你window.innerWidth的1248 如何,这意味着比例因子约为30%.
tl; dr:innerWidth/innerHeight应用了捏拉缩放系数反射视口,页面加载完全缩小.
编辑:此后Chrome已发生变化.window.innerWidth现在返回布局视口宽度.要获得可视视口宽度,请使用window.visualViewport.width.有关详细信息,请参阅此文章.
- 我在使用设备工具栏时遇到问题，其中“window.innerHeight”我认为是错误的。事实证明，这是因为我正在使用``<meta name =“viewport”content =“width = device-width，initial-scale = 1”>``将``initial-scale = 1``更改为``minimum -scale=1`` 解决了这个问题。希望这对某人有帮助。 (4认同)
- 很好的解释.谢谢.我尝试upvote你的问题,但我需要至少15代:( (2认同)
我不确定这是否是最近的更新（自上次回复以来），但我能够使用以下方法找到视口高度/宽度：
window.screen.width
和
window.screen.height
当我尝试测试屏幕是否为手机大小时，这特别有用。
小智 6
我们目前在以下方面取得了成功：
const widths = [window.innerWidth];
if (window.screen?.width) {
widths.push(window.screen?.width);
}
const width = Math.min(...widths);
之所以存在条件检查，是因为我不确定屏幕宽度 API 的普及程度。您可能需要调整此设置，以不使用某些较新的 JS 功能，具体取决于您的目标设备/构建过程。
如果您的窗口比屏幕宽，这可能会有点奇怪，但对我们来说这不是问题。
这为我们提供了与响应式屏幕工具顶部的宽度相匹配的宽度，即使内容水平溢出也是如此。这对我们来说很重要，因为我们需要更改 UI 以防止溢出，但溢出会干扰我们用来触发调整的宽度数。
我不确定这是否重要，但我们也在使用：
<meta name="viewport" content="width=device-width, initial-scale=1" />
| 归档时间： |
|
| 查看次数： |
8704 次 |
| 最近记录： |