レスポンシブ テーマを実装する際の課題は、ターゲットにしたいデバイスの 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 タグが含まれなくなります。これが発生する正確な条件はまだ特定できていませんが、これはページ キャッシング (「通常」にオンになっている) に関係していると思われます。すべてのキャッシュをフラッシュすると、動作が一時的に修正されます。
このアプローチまたは代替アプローチの何が問題なのかを誰かが提案できますか?