Fatal编程技术网
  • mobile/
  • Mobile 如何在Drupal 6主题模板中检测移动设备？

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

mobile drupal-6 responsive-design

Mobile 如何在Drupal 6主题模板中检测移动设备？,mobile,drupal-6,responsive-design,Mobile,Drupal 6,Responsive Design,实现响应主题的挑战是仅为您希望定位的设备插入视口标记。在我的例子中，我想为移动类设备添加标签，但不是平板电脑 我正试图通过在我的theme template.php顶部设置一个条件头来实现这一点： if (getIsMobile()) {drupal_set_html_head('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">');} function g

实现响应主题的挑战是仅为您希望定位的设备插入视口标记。在我的例子中，我想为移动类设备添加标签，但不是平板电脑

我正试图通过在我的theme template.php顶部设置一个条件头来实现这一点：

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

if（getIsMobile（））{drupal\u set\u html\u head（“”）}
函数getIsMobile（）
{
（诺基亚（诺基亚）iphone手机（iphone）手机（手机）手机（手机）手机（手机）手机（手机）手机（手机）手机（手机）手机（手机）用户（手机）手机（手机）手机（手机）手机（手机）移动（手机）用户（手机）移动（手机）手机（手机）移动（诺基亚）手机（诺基亚）手机（iphone）手机（iphone）手机（iphone）手机（手机）手机（手机）手机（手机）手机（手机）手机（手机）手机）和软银行（软银行）网站（FOMa1244）FOMa1244.FO马马马波（FO马马甲（Do卡政政政政政政政政政政政政协）Do币（KD）KD）KD币（KD币（KD）KD迪币（KD币）KD）上，KD迪币（KD）上）上，手机（KD）上）上）上，手机（手机（KD）上）上）上，手机（上）上）上。浏览器浏览器浏览器（浏览器（上）上）上| s[cg]（1244）中国农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村|歌剧\*迷你| 320x320 | 240x320 | 176x220）/i'；
$_isMobile=（isset（$_服务器['HTTP_X_WAP_PROFILE']））| | isset（$_服务器['HTTP_PROFILE']））| | preg_match（$RE_MOBILE，$_服务器['HTTP_用户_代理]）；
返回$\u isMobile；
}
上面的用户代理字符串故意省略了iPad

乍一看，这工作正常，但在生产模式下似乎“超时”。在进行一些Authencled活动（如节点编辑）后，在适用的移动设备上查看站点时，视口标记将停止包含。我还不能确定发生这种情况的确切条件，但我怀疑这与页面缓存有关（页面缓存被打开为“正常”）。刷新所有缓存会暂时修复该行为

有人能指出这种方法或其他方法的缺点吗？

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

当Drupal的页面缓存设置为“正常”时，每个页面都由匿名用户基于第一个视图构建，并缓存在{cache_page}表中。查看同一页的后续匿名用户将从缓存表中获取该页，直到缓存过期

因此，如果第一个访问Page-X的匿名用户在您的列表中有一个用户代理，那么将使用viewport标记构建和缓存该页面。后续匿名访问者将被提供带有viewport标记的页面，而不管他们的用户代理如何，直到缓存过期并重建。然后该过程重新开始

简单的答案是禁用页面缓存。但我不建议这样做，即使是对于交通量非常小的网站

更好的解决方案是将此逻辑移到客户端；这就是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>


如果（导航器。用户代理。导航器。用户代理。匹配（以下）匹配（以下）匹配（以下）匹配（以下）匹配（以下）诺基亚（诺基亚）诺基亚（诺基亚；iphone；iphone；iphone；iphone；iphone；iphone；iphone；iphone；android；android；摩托罗拉；摩托罗拉；摩托罗拉；摩托罗拉；摩托罗拉；摩托罗拉；摩托；软银行；软银行；软银行；软银行；软银行；软银行；软银行；福马场；福马场；软银行；软银行；软银行；软银行；福马场；福马场；福马场；国防军；国防军；国防银行；软银行；软银行；软银行；软银行；软银行；软银行；软银行；福马场场；软银行；科科科科托托托马场；国防军；国防军；软银行；软银行；软银行；软银行；软银行；软银行；软银行；软银行；软银行；软银行；福马场；软银行；软银行；福马场；福马场；基基基基托托托托托\-| s[cg]（1244）中国农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村农村|歌剧\*迷你| 320x320 | 240x320 | 176x220）/i）{
$（'head'）。追加（''）；
}
上面的内容将放在主题的page.tpl.php文件中。

我明白了——这非常有意义。谢谢@adam balsam，我将把这个逻辑转移到JS！