根据设备分辨率指定视口宽度

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

我发现使用W3C标准化方法实现了我尝试用JavaScript做的事情。

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

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

视口将自动采用页面大小。