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

Question

我正在建立我的第一个网站，而我的meta标签只是定义了恒定宽度而不是占用设备宽度，因为我在玩CSS动画时很想避免动态变化。除了需要集中处理的内容以外，大多数内容在移动设备上看起来都不错。当我基于百分比居中时，它基于我设置的宽度（视口）而不是设备的宽度居中。当然，这不是一个错误，但是我想知道是否有一种方法可以获取设备的宽度，即使我没有将其设置为视口，因此我可以将left属性计算为居中。有任何想法吗？谢谢！

我没有放置代码，因为实际上没有任何问题，它更多是一个操作问题。

Answer 1

有时，某些用户在台式机设备上无法最大化其浏览器。但是您可以尝试通过创建变量来获取应用程序的“正文”宽度。更高级的方法是检查导航期间该值是否存在正变化。在移动设备上，除非旋转屏幕，否则该值将更加精确。

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 );
}