모바일 에이전트 자동 감지 (사용자 에이전트를 통해?) [닫기]

사용자가 모바일 웹 브라우저에서 내 웹 사이트를보고 있는지 감지하여 적절한 버전의 웹 사이트를 자동으로 감지하여 표시하려면 어떻게해야합니까?

예, User-Agent 헤더를 읽으면 유용한 정보를 얻을 수 있습니다.

몇 가지가 있습니다 목록 밖으로 당신이 처음부터 시작할 필요가 없습니다가 알려진 모바일 사용자 에이전트는. 내가해야 할 때 알려진 사용자 에이전트의 데이터베이스를 작성하고 수정을 위해 감지 된 알 수없는 것을 저장 한 다음 수동으로 무엇인지 파악하는 것입니다. 이 마지막 일은 경우에 따라 과도 할 수 있습니다.

Apache 레벨에서 수행하려면 다음과 같이 사용자 에이전트를 검사하는 재 작성 규칙 세트를 주기적으로 생성하는 스크립트를 작성할 수 있습니다 (또는 한 번만 새 사용자 에이전트를 잊어 버리거나 한 달에 한 번).

RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1

예를 들어 http : //domain/index.html 에 대한 요청은 http : //domain/mobile/index.html 로 이동합니다 .

스크립트가 htaccess 파일을 주기적으로 재생성하는 방식이 마음에 들지 않으면 사용자 에이전트를 검사하는 모듈을 작성할 수 있습니다 (이미 만든 것이 없지만 특히 적절한 예를 찾았습니다 ). 일부 사이트에서 업데이트합니다. 그런 다음 원하는 방식으로 접근 방식을 복잡하게 만들 수 있지만 귀하의 경우 이전 방식은 좋을 것이라고 생각합니다.

Detect Mobile Browser 에는 Apache, ASP, ColdFusion, JavaScript 및 PHP에서이를 수행 하는 오픈 소스 스크립트가 있습니다 .

그냥 생각하지만이 문제를 반대 방향에서 일하면 어떨까요? 어떤 브라우저가 모바일인지 결정하지 않고 왜 어떤 브라우저가 아닌 브라우저를 결정하지 않습니까? 그런 다음 사이트를 모바일 버전으로 기본 코딩하고 표준 버전으로 리디렉션하십시오. 모바일 브라우저를 볼 때 두 가지 기본 가능성이 있습니다. 자바 스크립트를 지원하거나 지원하지 않습니다. 따라서 브라우저가 자바 스크립트를 지원하지 않으면 기본적으로 모바일 버전으로 설정됩니다. JavaScript를 지원하는 경우 화면 크기를 확인하십시오. 특정 크기 이하의 것은 모바일 브라우저 일 수도 있습니다. 더 큰 것은 표준 레이아웃으로 리디렉션됩니다. 그런 다음 JavaScript를 사용하지 않는 사용자가 모바일인지 아닌지를 결정하기 만하면됩니다.
W3C에 따르면 JavaScript가 비활성화 된 사용자의 수는 약 5 %였으며 대부분의 사용자가 브라우저를 끈다는 사실을 암시했습니다. 그들은 당신의 청중의 큰 부분입니까? 그렇지 않다면 걱정하지 마십시오. 그렇다면 최악의 시나리오는 무엇입니까? 해당 사용자가 모바일 버전의 사이트를 탐색하고 있다는 것은 좋은 일입니다.

다음은 JavaScript에서 수행하는 방법입니다.

function isMobile() {
  var index = navigator.appVersion.indexOf("Mobile");
  return (index > -1);
}

www.tablemaker.net/test/mobile.html 에서 예제를 참조하십시오. 이 글꼴은 휴대폰에서 글꼴 크기가 세 배입니다.

내가 가장 좋아하는 모바일 브라우저 감지 메커니즘은 WURFL 입니다. 자주 업데이트되며 모든 주요 프로그래밍 / 언어 플랫폼에서 작동합니다.

css3 미디어 쿼리 사용을 고려 했습니까? 대부분의 경우 별도의 모바일 버전 사이트를 만들지 않고도 대상 장치에 특별히 CSS 스타일을 적용 할 수 있습니다.

@media screen and (max-width:1025px) {
   #content {
     width: 100%;
   }
}

너비는 원하는대로 설정할 수 있지만 1025는 iPad 가로보기를 사용합니다.

또한 다음 메타 태그를 머리에 추가하고 싶을 것입니다.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

좋은 예는 HTML5 Rocks 에서이 기사 를 확인하십시오.

대한 안드로이드, 아이폰, 아이 패드, 블랙 베리, 팜, WINDOWS CE, PALM

 <script language="javascript"> <!--
     var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
              if (mobile) {
                  alert("MOBILE DEVICE DETECTED");
                  document.write("<b>------------------------------------------<br>")
                  document.write("<b>" + navigator.userAgent + "<br>")
                  document.write("<b>------------------------------------------<br>")
                  var userAgent = navigator.userAgent.toLowerCase();
                  if ((userAgent.search("android") > -1) && (userAgent.search("mobile") > -1))
                         document.write("<b> ANDROID MOBILE <br>")
                   else if ((userAgent.search("android") > -1) && !(userAgent.search("mobile") > -1))
                       document.write("<b> ANDROID TABLET <br>")
                   else if ((userAgent.search("blackberry") > -1))
                       document.write("<b> BLACKBERRY DEVICE <br>")
                   else if ((userAgent.search("iphone") > -1))
                       document.write("<b> IPHONE DEVICE <br>")              
                   else if ((userAgent.search("ipod") > -1))
                       document.write("<b> IPOD DEVICE <br>")
               else if ((userAgent.search("ipad") > -1))
                       document.write("<b> IPAD DEVICE <br>")
                       else
                   document.write("<b> UNKNOWN DEVICE <br>")
              }
              else
                  alert("NO MOBILE DEVICE DETECTED"); //--> </script>

모바일 장치 브라우저 파일은 ASP.NET 프로젝트의 모바일 (및 기타) 브라우저를 감지하는 좋은 방법입니다. http://mdbf.codeplex.com/

를 통해 모바일 클라이언트를 간단하게 navigator.userAgent감지하고 감지 된 클라이언트 유형을 기반으로 대체 스크립트를 다음과 같이로드 할 수 있습니다 .

 $(document).ready(function(e) {

        if(navigator.userAgent.match(/Android/i)
          || navigator.userAgent.match(/webOS/i)
          || navigator.userAgent.match(/iPhone/i)
          || navigator.userAgent.match(/iPad/i)
          || navigator.userAgent.match(/iPod/i)
          || navigator.userAgent.match(/BlackBerry/i)
          || navigator.userAgent.match(/Windows Phone/i)) {

         //write code for your mobile clients here.

          var jsScript = document.createElement("script");
          jsScript.setAttribute("type", "text/javascript");
          jsScript.setAttribute("src", "js/alternate_js_file.js");
          document.getElementsByTagName("head")[0].appendChild(jsScript );

          var cssScript = document.createElement("link");
          cssScript.setAttribute("rel", "stylesheet");
          cssScript.setAttribute("type", "text/css");
          cssScript.setAttribute("href", "css/alternate_css_file.css");
          document.getElementsByTagName("head")[0].appendChild(cssScript); 

    }
    else{
         // write code for your desktop clients here
    }

    });

User-Agent 문자열을 확인할 수 있습니다. JavaScript에서는 정말 쉽습니다. 네비게이터 객체의 속성 일뿐입니다.

var useragent = navigator.userAgent;

JS의 iPhone 또는 Blackberry가 다음과 같은 장치인지 여부를 확인할 수 있습니다.

var isIphone = !!agent.match(/iPhone/i),
    isBlackberry = !!agent.match(/blackberry/i);

isIphone이 true 인 경우 Iphone에서 사이트에 액세스하고 있고 isBlackBerry 인 경우 Blackberry에서 사이트에 액세스하고 있습니다.

firefox 용 "UserAgent Switcher"플러그인을 사용하여 테스트 할 수 있습니다.

당신도 관심이 있다면, 그것은 내 스크립트 체크 아웃 가치가 될 수있다 "redirection_mobile.js" 여기 GitHub의에서 호스팅을 https://github.com/sebarmeli/JS-Redirection-Mobile-Site 당신이 중 하나에 대한 자세한 내용을 읽을 수 있습니다 내 기사는 다음과 같습니다.

http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version-through-javascript/

protected void Page_Load(object sender, EventArgs e)
{
    if (Request.Browser.IsMobileDevice == true)
    {
        Response.Redirect("Mobile//home.aspx");
    }
}

이 예제는 asp.net에서 작동합니다

어떤 언어를 사용하고 있는지 말하지 않았습니다. 그것이 Perl이라면 사소한 것입니다 :

use CGI::Info;

my $info = CGI::Info->new();

if($info->is_mobile()) {
   # Add mobile stuff
}

unless($info->is_mobile()) {
   # Don't do some things on a mobile
}

예, 사용자 에이전트는 모바일 브라우저를 감지하는 데 사용됩니다. 이를 확인하는 데 사용할 수있는 무료 스크립트가 많이 있습니다. 다음은 모바일 사용자를 다른 웹 사이트로 리디렉션하는 데 도움이되는 PHP 코드 입니다.

이 데모를 스크립트와 예제를 함께 사용하여 넣었습니다.

http://www.mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/

이 예제는 사용자 에이전트 감지를 위해 php 기능을 사용하며 사용자가 일반적으로 브라우저 또는 장치 유형에 따라 기본값이 아닌 사이트 버전에 대한 기본 설정을 지정할 수있는 추가 이점을 제공합니다. 이것은 쿠키로 수행됩니다 (자바 스크립트와 달리 서버 측에서 PHP를 사용하여 유지 관리).

예제를 보려면 기사의 다운로드 링크를 확인하십시오.

당신이 즐기시기 바랍니다!

MobileESP 에는 PHP, Java, APS.NET (C #), Ruby 및 JavaScript 후크가 있습니다. 또한 Apache 2 라이센스도 있으므로 상업적으로 무료로 사용할 수 있습니다. 나에게 중요한 것은 화면 크기와 다른 메트릭스가 아닌 브라우저와 플랫폼 만 식별하므로 크기를 작게 유지하는 것입니다.

Zend Framework를 사용하는 새로운 솔루션이 있습니다. Zend_HTTP_UserAgent에 대한 링크에서 시작하십시오.

http://framework.zend.com/manual/en/zend.http.html