如何获取设备宽度(不是视口)?

Question

我正在制作我的第一个网站，我的meta标签只是定义了一个恒定的宽度而不是采用设备宽度，因为我对CSS动画很感兴趣，并希望避免使其动态化。除了需要居中的内容外，大多数在移动设备上看起来都不错。当我根据百分比将其居中时，它会根据我设置的宽度(我的视口(而不是设备的宽度居中。当然，这不是一个错误，但我想知道是否有办法让我获得设备的宽度，即使我没有将其设置为视口，所以我可以计算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：点击 运行代码 然后点击整页，这样你就可以调整浏览器的大小并测试我的代码段。它将显示当前宽度。

Answer 2

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

your_var_name = document.body.clientWidth

Answer 3

我推荐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 );
}