个人中心
gpt4 book ai didi

google-chrome - Chrome 设备模式下的 window.innerWidth

转载 作者：行者123 更新时间：2023-12-04 01:22:48 31 4
gpt4 key购买 nike

在谷歌浏览器的设备模式下，window.innerWidth 返回什么？它是设备的视口(viewport)(加上任何滚动条)吗？

我得到了设备的宽度 x 高度(页面顶部的尺寸 - 设备的视口(viewport)？)和 window.innerWidth x window.innerHeight (浏览器的视口(viewport)？)的不同值。这应该发生吗？

这是我得到的图片，以及我使用的代码。

image

<!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返回视觉视口(viewport)的尺寸。在桌面浏览器中，这通常是浏览器的窗口尺寸。在移动设备上，由于捏缩放，情况有点复杂。

当您加载没有 <meta name="viewport"> 的页面时标签，使用默认布局宽度(例如 Chrome 使用 980px)。当浏览器加载页面时，它会最大限度地缩小。看起来您上面的设备尺寸的宽度为 425 像素，因此当页面加载时浏览器会缩小以查看整个 980 像素。如果您的内容比这更宽(例如您的图像)，它会进一步缩小。看看你的window.innerWidth是 1248，这意味着比例因子约为 30%。

tl;博士:innerWidth/innerHeight在应用了捏缩放因子的情况下反射(reflect)视口(viewport)，并且页面加载完全缩小。

编辑:这已经在 Chrome 中发生了变化。 window.innerWidth现在返回布局视口(viewport)宽度。要获得视觉视口(viewport)宽度，请使用 window.visualViewport.width .见 this article更多细节。

关于google-chrome - Chrome 设备模式下的 window.innerWidth，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36297612/

31 4 0
文章推荐： rest - Invoke-RestMethod 将反斜杠转换为斜杠
文章推荐： chart.js - 不使用 chart.js 绘制空值
文章推荐： wix - 将所有文件包括在Wix安装程序的Bin文件夹中
文章推荐： NHibernate 通过 Nuget
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com