javascript - BuzzFeed 如何进行移动重定向？

Question

我正在尝试向我的网站添加移动重定向。我想我想要一个完全独立的布局，而不是使用媒体查询。

实现此目的的一种简单方法是让 CloudFlare 检测并重定向到子域 m.example.com。

出于多种原因，我不想使用子域。

我过去做的另一种方法是使用 this mobile detect script与媒体查询和部分加载页面的部分。从长远来看，这被证明是一场噩梦，我不想使用媒体查询。

我注意到了路buzzfeed.com这几乎正​​是我想要的方式。看起来他们以某种方式检测浏览器或其他东西，然后重定向到显示移动网站的 ?s=mobile。

我无法判断这是在服务器上还是在 Javascript 中完成的，或者他们是如何做到的。我假设它在服务器上，因为如果我 curl http://www.buzzfeed.com/?s=mobile 我会收到 302 响应...我猜因为curl 没有发送看起来像移动设备的 header 。

是否有常见的、经常维护的 nginx 或 varnish 脚本来执行此操作？我主要是摸不着头脑，谷歌搜索似乎没有带来太多相关的讨论，除了 3 年前看起来很弱的片段。

Answer 1

您可以使用varnish-devicedetect VCL 可以完成您正在寻找的一切。 installation guide举例说明如何向请求 URL 添加查询参数，或向发送到后端的请求添加自定义 header 。这使您能够透明地处理不同类型的客户端。

要让所有 Vary header 、清除等完美工作，需要大量的思考和摆弄，但在示例的帮助下，您应该能够使 varnish-devicedetect 为您工作。