将用户重定向到 MediaWiki wiki 的移动视图答案

【问题标题】：Redirect users to mobile view of MediaWiki wiki将用户重定向到 MediaWiki wiki 的移动视图
【发布时间】：2013-04-07 06:14:34
【问题描述】：

我目前正在搞清楚如何将某些设备上的用户重定向到我的 MediaWiki 安装的移动版本。用于手动切换视图的内置链接（由MobileFrontend 扩展提供）位于底部，但很小且容易错过。

我首先考虑在 PHP 中进行某种用户代理字符串检测（完全披露：完整的 PHP 新手），但这似乎不是一个好的解决方案，原因有几个。首先，除非重定向发生在页面上的任何其他内容被发送之前，否则它不会起作用。其次，用户代理嗅探似乎容易出错。第三，我一开始不知道如何或在何处将代码插入到 MediaWiki 安装中。显然，Wikipedia 使用 Varnish 来检测移动用户，但我没有该选项（共享主机），也不知道如何使用它。

我一直在研究的第二个也是当前的解决方案是使用 Javascript 来重定向用户。缺点是必须下载两个页面——桌面页面和移动页面。除此之外，我在让它正常工作时遇到了很多问题。以下所有代码位都放在MediaWiki:Common.js 中，每次页面加载时都会为所有用户加载。

if(document.URL.search("mobile") == -1)
{

  if(document.documentElement.clientWidth <= 735)
  {
    window.location.replace(document.URL + "?useformat=mobile");
  }
}

问题：任意切换到移动视图。我在 Nexus 7 上使用 Chrome 远程调试仔细检查了宽度。有时我会得到 980，有时我会在纵向上得到 601。报601的时候不会触发移动重定向，但是如果我在桌面的Chrome/Firefox/IE中打开同样宽度的同一个页面，就完美重定向了。

使用 jQuery 似乎不是一种选择，因为它显然使用same method 来确定宽度。

if(document.URL.search("mobile") == -1)
{
  if( navigator.userAgent.match(/Android/i)
   || navigator.userAgent.match(/webOS/i)
   || navigator.userAgent.match(/iPhone/i)
   || navigator.userAgent.match(/iPod/i)
   || navigator.userAgent.match(/BlackBerry/i)
   || navigator.userAgent.match(/Windows Phone/i))
  {
    window.location.replace(document.URL + "?useformat=mobile");
  }
}

问题：这确实有效（当然，不存在的用户代理不会触发重定向），但问题在于粒度。例如，我希望在我的 Galaxy Nexus 或 Nexus 7 上显示移动视图，而不是在 Nexus 10 或 Asus Transformer 上。

3) MobileDetect MediaWiki 扩展

问题：此扩展程序自 2010 年以来未更新，但它可能仍然可以正常工作。除此之外，在 PHP 中检测移动设备非常棒，但是移动站点不想为更大的平板电脑用户提供服务的问题仍然存在。另外，听起来很荒谬，我什至不知道移动皮肤的名称是什么（或者它是否是皮肤），或者如果扩展检测到移动设备（因为它执行 PHP 重定向为时已晚）。

我在实验的过程中在这里和那里进行了一些微调，但核心思想始终是宽度检测或用户代理嗅探。使用宽度来重定向用户会很棒，但它看起来太挑剔了，我不能相信它。我什至遇到了我的手机或平板电脑显示桌面版本而桌面浏览器只显示移动版本的情况（这是detectmobilebrowsers.com 的功能；我不得不禁用 Javascript 只是为了从 Common 中删除有问题的代码.js)。

必须有一些相当直接的方法将手机和小型平板电脑用户重定向到 wiki 的移动视图。我只是在我的一个解决方案中犯了一个错误，还是有其他方法可以做到这一点？

【问题讨论】：

这个 ua 解析库是最好的。很容易。它有js和php，选择你的毒药。 github.com/tobie/ua-parser
那个库看起来很可靠。唯一的问题是，我试图确定的一个主要角落案例 - 没有大型平板电脑（~10 英寸）获得移动视图 - 无法通过使用此方法解决。
您可以随时查看代码....找到平板电脑声明的位置....将它们移至桌面
那是我找不到的部分（平板电脑声明）。我对 SO 做了更多的挖掘，但似乎将 Android 平板电脑与手机区分开来的唯一方法是用户代理字符串中没有“Mobile”。至于区分中大平板，基本没什么。
它在 yaml 文件中github.com/tobie/ua-parser/blob/master/regexes.yaml 快速查看后，我看到里面有一些平板电脑

标签： php javascript mediawiki

【解决方案1】：

如果您使用 MobileFrontEnd Extension 来显示移动版 Mediawiki，那么您可以设置

$wgMFAutodetectMobileView = true;

在您的 LocalSettings.php 文件中包含到 MobileFrontend 包含下方。

唯一的缺点是您将无法使用 FileCaching，因为移动设备将从缓存中提取最后存储的页面。

【讨论】：

【解决方案2】：

我决定使用用户代理方法。我确信它不会捕捉到阳光下的一切，但它应该捕捉到大多数可能访问该站点的设备。代码如下：

if(document.URL.search("mobile") == -1)
{
  var ua = navigator.userAgent;

  if(ua.match(/Android/i))
  {
    if(ua.match(/Mobile/i))
    {
      window.location.replace(document.URL + "?useformat=mobile");
    }
  }
  else if((/webos|iphone|ipod|blackberry|windows phone|bada/i).test(ua))
  {
    window.location.replace(document.URL + "?useformat=mobile");
  }
}

手机将获得移动视图，而平板电脑、台式机和其他设备将获得桌面视图 - 区分中型和大型平板电脑太成问题了。手机必须加载两个页面而不是一个页面仍然存在缺点，但 wiki 并不是特别重媒体。请注意，上面的代码似乎也能正确捕捉 Kindle Fire 上亚马逊 Silk 浏览器的移动视图（参见 here）。

question 提供了有关移动浏览器检测的更多详细信息，this 解释了如何区分 Android 手机和平板电脑。尽管我无法让它可靠地工作，但this answer 有一种有趣的方法，可以使用基于 em 的媒体查询来区分手机、平板电脑和台式机。

【讨论】：