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に最初にアクセスした匿名ユーザーのリストにユーザーエージェントが含まれている場合、ページはビューポートタグを使用して作成およびキャッシュされます。その後の匿名の訪問者には、キャッシュの有効期限が切れて再構築されるまで、ユーザーエージェントに関係なく、ビューポートタグが付いたページが提供されます。その後、プロセスが最初からやり直します。

簡単な答えは、ページキャッシュを無効にすることです。ただし、トラフィックが非常に少ないサイトであっても、これはお勧めしません。

より良い解決策は、このロジックをクライアント側に移動することです。それは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 に答える