html - 根据设备分辨率分配视口宽度

Question

我知道我可以定义视口大小：

<meta name="viewport" content="width=330, user-scalable=no, initial-scale=1, maximum-scale=1">

而且我知道我可以将视口调整为设备的：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

有没有办法（没有 JavaScript）来检测设备宽度并分配视口：

例如，

如果设备宽度在 (0-450px) 范围内设置：

<meta name="viewport" content="width=400, user-scalable=no, initial-scale=1, maximum-scale=1">

如果设备宽度在 (451-900px) 范围内设置：

<meta name="viewport" content="width=700, user-scalable=no, initial-scale=1, maximum-scale=1">

我无法在网上找到任何详细说明这一点的参考资料。我非常感谢任何帮助或参考。

Answer 1

我发现我试图用 JavaScript 做的事情是通过 W3C 标准化方法实现的。

结合媒体查询根据分辨率更改某些元素的样式，只需定义：

<meta name="viewport" content="width=width, user-scalable=no">

并且视口将自动假定您的页面大小。