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

Question

如何创建一个完全响应的网站（即“流畅的”，不会>最终显示缩小的＆＃34; mobile＆＃34 ;平板电脑上的版本？ （通常网站的移动版本在设计时考虑到了大拇指。它非常基本，通常是单列，并且不适合像平板电脑这样的大型移动设备。）

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

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

我觉得我错过了一个非常明显的伎俩！

Answer 1

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

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

http://www.html5hacks.com/blog/2012/11/28/elegantly-resize-your-page-with-the-at-viewport-css-declaration/

上述链接的一个例子：

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

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

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

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

请参阅http://www.webdevdoor.com/responsive-web-design/change-viewport-meta-tag-javascript

Answer 2

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