如何获取设备的宽度（不是视口）？

Question

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

我没有放代码，因为确实没有任何问题，它更像是一个操作方法问题。

Answer 1

有时一些用户在使用桌面设备时不会最大化他们的浏览器。但是您可以尝试通过创建变量来获取应用程序的 "body" 宽度。更高级的是检查导航期间该值是否有任何正变化。在移动设备上，该值会更精确一些，除非屏幕旋转。

your_var_name = document.body.clientWidth

Answer 2

我推荐 flex css 属性。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

html

<div class="wrapper">
    wrapper
    <div class="inner"> inner </div>
</div >

css

.wrapper {
        display: flex;
        justify-content: center;
        width: 200px;
}
.wrapper .inner {
    width: 50px;
}

或

使用绝对和相对

wrapper {
    position: absolute;
    width: 200px;
}

wrapper  parent {
    position: relative;
    width: 50px;
    left: calc( 100% - 25px );
}

Answer 3

要查找您的 html body（设备）的当前宽度，您可以尝试此 javascript 代码 window.innerWidth;

尝试运行此代码并将 windows 调整为不同的宽度：

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

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

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

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

如何获取设备的宽度（不是视口）？

How to get width of device (not viewport)?

html

css

viewport

media-queries