如何在不编写脚本 (PHP) 或服务器配置 (Nginx) 的情况下检测移动设备（和/或移动 cookie）？

Question

我们很快就会推出网站的移动版本。我们的完整网站和移动网站仅主题不同，即网址相同，唯一的区别在于前端。

当用户访问我们的网站时，我们需要能够执行以下操作：

1. 检查 cookie（移动 == true 或 false）以确定是否已定义完整与移动首选项（通过用户手动或通过我们端的检测）。

2. 如果未设置移动 Cookie，则在首页视图中检测用户的设备并将移动 Cookie 设置为 true 或 false。

3. 根据 #1 和/或 #2 的结果提供适当的体验（完整体验或移动体验）。

最初我使用 PHP 来检测工作正常的设备。然而，我们的网站在主页和其他一些页面上使用了极端完整的 HTML 缓存（.html 文件被写入我们的 Web 根目录中的文件夹中，如果 Nginx 找到它们，它们就会被提供服务，而不是通过 PHP 的请求 - 缓存每次都会被清除15 分钟），所以我不能依赖 PHP 从我们的主要用户入口点检测移动设备（据我目前所知......）。

由于无法依赖 PHP，所以我将移动 cookie 检查和设备检测放入 Nginx 配置文件中（开发时在本地使用 Apache，由我们的 Nginx 服务器人员翻译）。然而，我们的服务器管理人员回复我们说，新的 Nginx 配置文件对性能的影响将会很大（“性能影响”在我们的办公室是一个 4 个字母的词）。

基本上我被告知主页的完整 HTML 缓存必须保持不变，并且我根本无法更改 Nginx 配置文件。鉴于上述限制，我是否可以使用另一种 cookie/设备检测方法？

Answer 1

你可以使用 JavaScript。

试试这个：http://detectmobilebrowsers.com/

Answer 2

我过去曾在 CSS 媒体查询和 JavaScript 中使用过这个巧妙的技巧...

在您的网站关闭 标记之前：

<div id="mobiledetect" style="display: none;"></div>

在您的 CSS 文件中：

@media screen and (max-device-width: 768px) {
  #mobiledetect {
    text-transform: uppercase;
  }
}

在您的 JavaScript 文件中（取决于 jQuery） ，但你可以修改它）：

$(function() {
  $is_mobile = false;
  if($('#mobiledetect').css('text-transform') == 'uppercase') {
    $is_mobile = true;
  }
});