html - 响应式设计 : Allow user to also view Full Site

Question

使用响应式设计时，有没有办法仍然允许用户查看完整网站？

例如他们正在 iPhone 上查看，但希望查看完整站点。他们单击“完整站点”链接，并向他们显示 1024 像素版本。

Answer 1

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

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

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

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

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