响应式设计：允许用户也查看完整站点

Question

使用响应式设计时，有没有办法让用户仍然可以查看整个网站？

E.g。他们正在iPhone上观看，但希望看到完整的网站。他们点击“完整站点”链接，它会显示1024px版本。

Answer 1

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

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

如果用户不想查看响应式布局，只需从body元素中删除“responsive”类，从而使所有规则无效。您可以通过cookie或其他方法保留用户首选项。

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

将窗口缩小到不超过500px会将文本变为白色，背景变为蓝色。这取决于具有“响应”类的身体。单击第一段将切换此类，从而切换媒体查询本身的效果。

Answer 2

我一直在想这个。我成功地使用jQuery来修改视口标签，似乎从我到目前为止所说的相当好。不需要多个样式表或许多额外的CSS。

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

Answer 3

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

切换样式表肯定不是一个新概念。这是ALA大约2001年关于切换样式表的文章：http://www.alistapart.com/articles/alternate/