Question

实施响应式主题的挑战是仅为您要定位的设备插入VIEWPORT标记。在我的情况下，我想为移动级设备添加标签，但不是平板电脑。

我正在尝试使用主题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标记。我还没有确定发生这种情况的确切条件，但我怀疑这与页面缓存（打开“正常”）有关。刷新所有缓存会暂时修复该行为。

任何人都可以建议这种方法或替代方法可能有什么问题吗？

Answer 1

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

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

因此，如果第一个访问Page-X的匿名用户在您的列表中有用户代理，则将使用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>

上面的内容会出现在你主题的page.tpl.php文件中。

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

1 个答案: