响应式设计:允许用户查看整个网站

Question

当使用响应式设计时，有没有一种方法仍然允许用户查看整个网站？

例如，他们正在iPhone上查看，但想要查看整个网站。他们点击一个“完整站点”链接，它会向他们显示1024px版本。

Answer 1

如果您使用的是媒体查询，请仅在具有类“responsive”的body元素下应用规则。

@media screen and (max-width: 320px) {
  body.responsive {
    color: blue;
  }
}

如果用户不想查看响应式布局，只需从body元素中删除' responsive‘类，使所有规则无效。您可以通过cookie或其他方法来持久化用户的首选项。

演示：http://jsbin.com/obaquq/edit#javascript,html

将窗口缩小到不超过500px将使文本变为白色，背景变为蓝色。这是以body具有“responsive”类为条件的。单击第一段将切换此类，从而切换媒体查询本身的效果。

Answer 2

我一直在想这件事。我已经成功地使用jQuery修改了视窗标记，据我目前所知，它似乎工作得相当好。不需要多个样式表或大量额外的CSS。

http://creativeandcode.com/responsive-view-full-site/

Answer 3

我还没有尝试过，但我自己也考虑过这个问题。我想您可以使用样式表切换器来停用核心响应式样式表，让用户获得完整版本

切换样式表当然不是一个新概念。这是一篇关于2001年左右的ALA的文章，讨论了切换样式表：http://www.alistapart.com/articles/alternate/