html - 如何获取设备的宽度(不是视口(viewport))？

Question

我正在制作我的第一个网站，我的 meta 标签只是定义了一个恒定的宽度，而不是采用设备宽度，因为我对 CSS 动画很感兴趣并且想避免让它动态化。除了需要居中的内容外，大部分内容在移动设备上看起来都不错。当我根据百分比将它居中时，它会根据我设置的宽度(我的视口(viewport))而不是设备的宽度居中。当然，这不是一个错误，但我想知道是否有办法让我获得设备的宽度，即使我没有将它设置为视口(viewport)，所以我可以只计算 left 属性使其居中。有任何想法吗？谢谢!

我没有放代码，因为真的没有任何问题，它更像是一个如何做的问题。

Answer 1

要查找您的 html 正文(设备)的当前宽度，您可以尝试此 javascript 代码 window.innerWidth;

尝试运行此代码并将窗口调整为不同的宽度:

function myFunction() {
  var wid = window.innerWidth;
  document.getElementById("display").innerHTML = "Width: " + wid;
}

<button onclick="myFunction()">Show</button>

<div id="display"></div>

ps:单击“运行代码”，然后单击“整页”，这样您就可以调整浏览器大小并测试我的代码段。它将显示当前宽度。