1

实现响应式主题的挑战是只为您希望定位的设备插入 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 标记将不再包含在内。我还不能确定发生这种情况的确切条件，但我怀疑这与页面缓存（打开为“正常”）有关。刷新所有缓存会暂时修复该行为。

谁能建议这种方法或替代方法可能有什么问题？

4

1 回答 1

3

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

随着 Drupal 的页面缓存设置为“正常”，每个页面都建立在匿名用户的第一个视图之上，并缓存在 {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 文件。

于 2012-12-12T13:40:48.637 回答