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

Question

我知道我可以定义视口(viewport)大小:

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

我知道我可以根据设备调整视口(viewport):

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

有没有办法(不用 JavaScript)检测设备宽度并分配视口(viewport):

例如，

如果设备宽度在(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">

并且视口(viewport)会自动采用您页面的大小。