html - 您如何在移动设备上使视口宽度不同？

有没有办法可以在移动 700 上制作视点宽度并将 1080 保留在桌面上

例如：meta name="viewport" content="width=700"（仅适用于移动设备）

meta name="viewport" content="width=1080"（仅适用于桌面）

标签： htmlcssresponsive-design

技术上是的：

<meta name="viewport" content="width=700">

…因为桌面浏览器无论如何都会忽略视口指令。

元视口之所以存在，是因为当智能手机首次推出时，没有人为它们设计网站。如果每个网站都因此崩溃，那么没有人能够出售智能手机，因此他们默认使用奇怪的缩放技巧并提供视口设置，这样如果有人在设计他们的网站时确实考虑了智能手机，他们就不会被不适当的缩放所困扰。

一般来说，您不应该在视口设置中指定宽度。如果您已经拥有一个具有固定宽度设计的世纪之交网站，并且您需要现代的小屏幕设备来应对它，那么它就在那里。

在大多数情况下

<meta name="viewport" content="width=device-width, initial-scale=1">

... 与 CSS 一起使用媒体查询来使设计正确负责是最佳的。

如果您真的想根据设备设置宽度，那么您可能不得不求助于使用 JavaScript 检测屏幕尺寸，将其设置在 cookie 中，然后触发重新加载。

然后，如果 cookie 存在，则使用服务器端代码设置元标记，并且不输出设置 cookie 并重新加载页面的 JS。

我不推荐这种方法。