Drupal 6 테마 템플릿에서 모바일 장치를 감지하는 방법은 무엇입니까?

반응 형 테마를 구현할 때의 도전 과제는 타겟팅하려는 기기에 VIEWPORT 태그를 삽입하는 것입니다. 필자의 경우, 모바일 장치 용 태그를 추가하고 싶지만 태블릿은 추가하지 않습니다. Drupal 6 테마 템플릿에서 모바일 장치를 감지하는 방법은 무엇입니까?

나는 나의 테마 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; 
}

문자열 위 의도적으로 아이 패드를 생략합니다.

처음에는 잘 보이지만 정상적으로 작동하지만 프로덕션 모드에서는 "시간 초과"로 나타납니다. 노드 편집과 같은 몇 가지 자동 작업 후 VIEWPORT 태그는 해당 모바일 장치에서 사이트를 볼 때 포함되지 않습니다. 이 상황이 발생하는 정확한 조건을 아직 결정할 수 없었지만 페이지 캐싱 ("정상"으로 설정)과 관련이 있다고 생각됩니다. 모든 캐시를 비우면 일시적으로 비헤이비어가 수정됩니다.

누구나이 접근 방식이나 대체 접근 방식에 결함이 있음을 제안 할 수 있습니까?

출처

2012-12-11 jddh

귀하의 의문 사항은 정확합니다. 이것은 페이지 캐싱과 관련이 있습니다.

Drupal의 페이지 캐시를 "normal"로 설정하면 익명 사용자가 각 페이지를 첫 번째보기에 따라 작성하고 {cache_page} 테이블에 캐시합니다. 동일한 페이지를 보는 후속 익명 사용자는 캐시가 만료 될 때까지 캐시 테이블에서 페이지를 제공받습니다.

결과적으로 첫 번째 익명 사용자가 Page-X를 방문하면 사용자 에이전트가 목록에 있고 해당 페이지가 빌드되어 뷰포트 태그로 캐시됩니다. 이후 익명 방문자는 캐시가 만료되고 다시 작성 될 때까지 사용자 에이전트에 관계없이 뷰포트 태그가있는 페이지를 제공 받게됩니다. 그러면 프로세스가 다시 시작됩니다.

간단한 대답은 페이지 캐시를 비활성화하는 것입니다. 그러나 매우 가벼운 교통 사이트의 경우에도 권장하지 않습니다.

더 나은 해결책은 클라이언트 측에서이 논리를 이동하는 것입니다. 그건 자바 스크립트입니다. 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-12 13:40:48

나는 본다 - 이것은 완벽한 의미를 가진다. 감사합니다 @ 아담 - balsam, 나는 JS 로이 논리를 이동합니다! – jddh

Drupal 6 테마 템플릿에서 모바일 장치를 감지하는 방법은 무엇입니까?

답변

관련 문제