2013-04-07 80 views
0

的移动视我目前套牢搞清楚如何在某些设备上的用户重定向到我的链接到MediaWiki安装的移动版本。用于手动切换视图的内置链接(由MobileFrontend扩展提供)位于底部,但很小且很容易遗漏。将用户重定向到MediaWiki维基

我首先考虑在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似乎并没有成为一个选项,因为它显然使用same method来确定宽度。

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有问题的代码)。

将手机和小平板电脑用户重定向到维基的移动视图必须有一些相当直接的方法。我只是在我的解决方案中犯了一个错误,还是有另一种方法来做到这一点?

+1

这个ua解析库是最好的。那么容易。它有js和php,选择你的毒药。 https://github.com/tobie/ua-parser – albert 2013-04-07 06:17:37

+0

该库看起来很稳固。唯一的问题是,我试图确定的一个主要的角落案例 - 没有大型平板电脑(〜10“)获得移动视图 - 并没有通过使用此方法解决。 – Gemini14 2013-04-07 06:25:51

+0

您可以随时查看代码。 ...找到平板电脑声明的位置....将它们移动到桌面 – albert 2013-04-07 06:53:16

回答

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"); 
    } 
} 

手机将获得移动视图和平板电脑,台式机和其他设备将获得桌面视图 - 中型和大型片区分实在是太大的问题。手机不得不加载两个页面,而不是一个,但维基媒体并不是特别重要。请注意,上面的代码似乎也能正确捕捉Kindle Fire上亚马逊Silk浏览器的移动视图(请参阅here)。

question有关于移动浏览器的检测更详细和this人解释如何区分Android手机和平板电脑。即使我无法在我的情况下可靠地工作,this答案有一个使用基于em的媒体查询区分手机,平板电脑和桌面的有趣方法。

2

如果您使用的是MobileFrontEnd扩展显示的MediaWiki的移动版本,那么你可以设置

$wgMFAutodetectMobileView = true; 

在您的LocalSettings.php文件下方的包括对MobileFrontend包括。

这样做的唯一缺点是您将无法使用FileCaching,因为移动设备将从缓存中获取上次存储的页面。