0

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

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

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

1)

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 似乎不是一种选择，因为它显然使用相同的方法来确定宽度。

2)

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 的移动视图。我只是在我的一个解决方案中犯了一个错误，还是有另一种方法可以做到这一点？

4

2 回答 2

2

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

$wgMFAutodetectMobileView = true;

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

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

于 2014-08-13T14:22:01.980 回答
0

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

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 浏览器的移动视图（参见此处）。

这个问题有一些关于检测移动浏览器的更多细节，这个问题解释了如何区分 Android 手机和平板电脑。尽管我无法让它可靠地工作，但这个答案有一种有趣的方法，可以使用基于 em 的媒体查询来区分手机、平板电脑和台式机。

于 2013-04-08T04:15:41.207 回答