在平板电脑上显示完全响应式网站的桌面版本答案

【问题标题】：Showing the desktop version of a fully responsive website on tablets在平板电脑上显示完全响应式网站的桌面版本
【发布时间】：2015-07-04 05:00:47
【问题描述】：

如何创建一个完全响应的网站（即“流动”）而不会最终在平板电脑上显示狭窄的“移动”版本？（通常，网站的移动版本在设计时会考虑到拇指。它非常基本，通常是单列，并不适合平板电脑等较大的移动设备。）

即使您已将所有内容设计为优雅地缩放到每个宽度，您仍然需要 viewport 设置来告诉用户的手机以正确的宽度显示内容......但这个设置似乎也被平板电脑也是如此。

我意识到您可以使用检测解决方案（例如Mobile Detect），但它并不是完全流畅（尽管我想如果检测到手机，您可以使用Mobile Detect 插入viewport 元标记）。有没有更好的方法让平板电脑显示桌面版本？

我觉得我错过了一个非常明显的技巧！

【问题讨论】：

【解决方案1】：

对不同尺寸的屏幕使用媒体查询，即：小型（手机）、中型（平板电脑）和桌面版本。您只会更改查询中需要更改的内容。然后还设置一个元标记，视口设置为 1.0。搜索媒体查询，那里有很多信息。祝你好运！

【讨论】：

【解决方案2】：

在采用 CSS 标准时应该如何工作：

在 CSS 中使用 @media 查询以及 @viewport CSS 标记，而不是元视口标记。这里有一个很好的解释如何做到这一点：

来自上述链接的示例：

@media (max-width: 699px) and (min-width: 520px) {
  @viewport {
    width: 640px;
  }
}

您可以使用它在更窄和更宽的设备上设置不同的视口。

但就目前而言，JavaScript 似乎是唯一的方法：

您可以监听 onResize 事件并检查屏幕的宽度，然后相应地调整 DOM 中的 viewport 元标记。

【讨论】：