【发布时间】：2021-03-22 23:01:35
【问题描述】：
有没有办法可以让移动设备上的视点宽度为 700，而桌面上的视点宽度为 1080
例如： meta name="viewport" content="width=700"（仅适用于移动设备）
meta name="viewport" content="width=1080"（仅适用于桌面）
【问题讨论】：
标签： html css responsive-design
【发布时间】：2021-03-22 23:01:35
【问题描述】：
技术上是的：
<meta name="viewport" content="width=700">
...因为桌面浏览器无论如何都会忽略视口说明。
存在元视口是因为当智能手机首次推出时，没有人为它们设计网站。如果每个网站都因此崩溃，那么没有人能够出售智能手机，因此他们默认使用奇怪的缩放技巧并提供 viewport 设置，这样如果有人在设计他们的网站时确实考虑了智能手机，他们就不会不要被不适当的缩放所困扰。
一般来说，您不应在视口设置中指定宽度。如果您已经拥有一个具有固定宽度设计的世纪之交网站，并且您需要现代的小屏幕设备来应对它，那么它就在那里。
在大多数情况下
<meta name="viewport" content="width=device-width, initial-scale=1">
… 与 CSS 一起使用媒体查询来使设计正确负责是最佳选择。
如果您真的想根据设备设置宽度，那么您可能不得不求助于使用 JavaScript 检测屏幕尺寸，将其设置在 cookie 中，然后触发重新加载。
然后，如果 cookie 存在，使用服务器端代码设置元标记，并且不输出设置 cookie 并重新加载页面的 JS。
我不推荐这种方法。
【讨论】：