如何检测Drupal 6主题模板中的移动设备？

实现响应主题的挑战是只为您希望定位的设备插入VIEWPORT标记。就我而言，我想为移动级设备添加标签，但不是平板电脑。如何检测Drupal 6主题模板中的移动设备？

我想在我的主题的template.php顶部有条件HEAD来实现：

if (getIsMobile()) {drupal_set_html_head('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">');} 

function getIsMobile() 
{ 
    $RE_MOBILE = '/(nokia|iphone|android|motorola|^mot\-|softbank|foma|docomo|kddi|up\.browser|up\.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam\-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte\-|longcos|pantech|gionee|^sie\-|portalmmm|jig\s browser|hiptop|^ucweb|^benq|haier|^lct|opera\s*mobi|opera\*mini|320x320|240x320|176x220)/i'; 

    $_isMobile = (isset($_SERVER['HTTP_X_WAP_PROFILE']) || isset($_SERVER['HTTP_PROFILE']) || preg_match($RE_MOBILE, $_SERVER['HTTP_USER_AGENT'])); 
    return $_isMobile; 
}

用户代理字符串上面将有意忽略的iPad。

乍一看，这个工程确定，但它似乎“超时”的生产模式。在节点编辑之类的一些认证活动之后，当在适用的移动设备上查看站点时，VIEWPORT标签不再包含在内。我还没有能够确定发生这种情况的确切条件，但我怀疑这与页面缓存（已打开为“正常”）有关。刷新所有缓存可以暂时修复该行为。

任何人都可以提出什么可能是错误的这种方法，或其他方法？

来源

2012-12-11 jddh

您的怀疑是正确的。这与页面缓存有关。

随着Drupal的页面缓存设置为“正常”，每一页在第一视图由匿名用户建立并在{} cache_page表缓存。查看同一页面的后续匿名用户将从缓存表中为页面提供服务，直到缓存过期。

因此，如果访问Page-X的第一个匿名用户在您的列表中有一个用户代理，则将使用视口标记构建并缓存页面。随后的匿名访问者将通过视口标记提供服务，无论其用户代理如何，直到缓存过期并重建为止。然后该过程重新开始。

简单的答案是禁用页面缓存。但我不建议即使是非常轻的交通网站。

更好的解决方案是将这种逻辑的客户端;那就是javascript。假设jQuery是已经加载，你可以用它来元视口代码追加为您的设备列表：

<head> 
    <script> 
    if (navigator.userAgent.match(/(nokia|iphone|android|motorola|^mot\-|softbank|foma|docomo|kddi|up\.browser|up\.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam\-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte\-|longcos|pantech|gionee|^sie\-|portalmmm|jig\s browser|hiptop|^ucweb|^benq|haier|^lct|opera\s*mobi|opera\*mini|320x320|240x320|176x220)/i)) { 
     $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">'); 
    } 
    </script> 
</head>

以上会去你的主题的page.tpl.php中的文件。

来源

2012-12-12 13:40:48

我明白了 - 这非常有道理。谢谢@ adam-balsam，我会把这个逻辑移到JS上！ – jddh

如何检测Drupal 6主题模板中的移动设备？

回答

相关问题