http 요청을 기반으로 웹 애플리케이션에서 모바일 브라우저를 감지하는 표준 방법

https://stackoverflow.com/questions/142273

02-07-2019
|

문제

우리는 기업 전자상거래 웹앱(Java/Servlet 기반)에 대한 모바일 브라우저 지원 경로를 따라가기 시작했습니다.물론 내려야 할 결정이 많이 있지만 모바일 브라우저를 안정적으로 감지하고 그에 따라 반환할 콘텐츠에 대한 결정을 내릴 수 있는 것이 초석인 것 같습니다.http 요청을 기반으로 이러한 결정을 (신속하게) 수행하고 이상적으로는 요청을 수행하는 특정 브라우저 및 장치(화면 크기, html 기능 등)에 대한 추가 정보를 수집하는 표준 방법이 있습니까?

또한 기존의 대규모 엔터프라이즈 웹앱을 사용하고 개발 측면에서 모바일 브라우저 지원을 설계하는 경로를 밟은 사람에게 도움이 될 만한 추가 정보가 있으면 감사하겠습니다.

[편집] 나는 요청 헤더를 확실히 이해하고 표준 사용자 에이전트 데이터베이스에 대한 정보가 큰 도움이 됩니다.'기타' 요청 헤더 속성에 대해 이야기하는 경우 유사한 표준화된 이름/값 리소스를 포함할 수 있다면 큰 도움이 될 것입니다.

[편집] 여러 사용자가 감지를 수행할 일부 웹 서비스에 대한 유선 호출과 관련된 솔루션을 제안했습니다.이것이 효과가 있다고 확신하지만 다음 두 가지 이유로 기업 전자 상거래 사이트에는 좋은 솔루션이 아닙니다.1) 속도.제3자에 대한 모든 페이지 요청에 대해 유선으로 호출하면 성능에 큰 영향을 미칩니다.2) 종속성/법적.우리는 웹 사이트 응답 시간과 주요 기능을 해당 서비스에 연결했는데, 이는 법적 및 위험상의 이유로 끔찍한 일입니다.

해결책

표준 방식이 사용자 에이전트를 확인하는 것이 아닌가? 여기에 있습니다 사용자 에이전트의 데이터베이스 모바일 브라우저를 감지하는 데 사용할 수 있습니다.

다른 팁

@David의 답변은 Wurfl을 사용하여 언급했습니다. 아마도 최선의 선택 일 것입니다. 그러나 성공률은 일반적으로 약 60%입니다 (내 및 다른 경험에서). 캐리어가 UA의 지속적으로 변경되고 존재하는 장치 프로파일의 양 (60,000+?)이 원하는 모든 올바른 데이터를 얻을 수있는 방탄 방법이 없습니다.

장치 DB에 크게 의존하기 전에 약간의 경고. 내가 잘못 생각한 경우 세션 옵션을 변경할 수 있도록하여 사용자의 옵션을 열어 두려고 노력할 것입니다.

당신이 사용할 수있는 현대화 브라우저 능력을 감지합니다

사용자 에이전트를 통해 모바일 브라우저를 감지 할 수 있지만 PC 플랫폼의 브라우저 전쟁은 스니핑 사용자 에이전트가 실제로 그렇게 좋은 일이 아니라는 것을 보여주었습니다.

이상적으로 수행해야 할 것은 미디어 유형에 따라 특정 스타일을 적용해야하거나 사용자 에이전트 이외의 헤더를 기반으로 다른 답변을 보내야한다는 것입니다. .

지금은 브라우저 스니핑을 통해 iPhone 및 Opera와 함께 작동하는 사이트를 코딩하는 것으로 충분할 수 있습니다. 그러나 Googles Android는 지금 어느 순간에오고 있으며 가까운 미래에 iPhone과 가까운 브라우저 기능을 갖춘 다른 휴대 전화가 많이 있습니다. 그리고 처음부터 가능성만큼 좋은 장치를 지원하지 않는 모바일 웹 사이트를 개발하는 것은 낭비입니다.

모바일 장치를 감지하는 올바른 방법을 검색 한 후 나는 간단하게 [바보]를 유지하기로 결정했고 인덱스 페이지에 '모바일 장치 사이트'버튼을 넣을 것입니다 .... 단 한 번의 클릭으로!

이 기사 (그리고 그것 후속 조치) 멋져 보인다.

모바일 브라우저를 감지합니다 - 다양한 프로그래밍 언어로 스 니펫.

다음 경량 Apache 구성은 PC 버전을 선호하는 경우 꽤 잘 작동하고 사용자 선호도를 기억합니다.

<VirtualHost (your-address-binding)>   

  (your-virtual-host-configuration)       

  RewriteEngine On     
  RewriteCond %{QUERY_STRING} !ui=pc
  RewriteCond %{HTTP_COOKIE} !ui=pc
  RewriteCond %{HTTP_USER_AGENT} "^.*(iphone|ipod|ipad|android|symbian|nokia|blackberry| rim |opera mini|opera mobi|windows ce|windows phone|up\.browser|netfront|palm-|palm os|pre\/|palmsource|avantogo|webos|hiptop|iris|kddi|kindle|lg-|lge|mot-|motorola|nintendo ds|nitro|playstation portable|samsung|sanyo|sprint|sonyericsson|symbian).*$" [NC,OR]

  RewriteCond %{HTTP_USER_AGENT} "^(alcatel|audiovox|bird|coral|cricket|docomo|edl|huawei|htc|gt-|lava|lct|lg|lynx|mobile|lenovo|maui|micromax|mot|myphone|nec|nexian|nook|pantech|pg|polaris|ppc|sch|sec|spice|tianyu|ustarcom|utstarcom|videocon|vodafone|winwap|zte).*$" [NC] 

  RewriteRule /(.*) http://bemoko.com/$1 [L]

  RewriteCond %{QUERY_STRING} "ui=pc"
  RewriteRule ^/ - [CO=ui:pc:(your-cookie-domain):86400:/]
  RewriteCond %{QUERY_STRING} "ui=default"
  RewriteRule ^/ - [CO=ui:default:(your-cookie-domain):86400:/]
</VirtualHost>

이 @에 대한 더 많은 배경 http://bemoko.com/training.team/help/team/pc-to-mobile-redirect

나는 uaprof와 사용자 에이전트를 기반으로 하는 무료 탐지 시스템을 제안합니다:http://www.mobilemultimedia.be일반적으로 동일한 uaprof에 대해 여러 사용자 에이전트가 있으므로 UAprof는 사용 가능한 경우 탐지를 위한 기본 키가 되어야 합니다.이를 스스로 관리하고 싶다면 Wurfl을 선택해야 합니다. 왜냐하면 전체 데이터베이스를 다운로드하여 로컬에서 직접 관리할 수 있기 때문입니다.

최근에 비슷한 필요가 있었을 때 이 코드 그것은 사용합니다 HTTP_X_WAP_PROFILE, HTTP_ACCEPT, 그리고 HTTP_USER_AGENT 브라우저를 모바일 또는 비 모빌로 식별합니다. PHP이지만 필요한 모든 것으로 쉽게 변환 할 수 있습니다 (클래식 ASP 용 VBScript에서 구현했습니다).

아이러니하게도, 모바일 및 비 모빌 사용자에게 특정 URL을 제공하기로 결정했기 때문에 코드를 사용하지 않았지만 테스트 할 때 확실히 효과가있었습니다.

요청 헤더에서 브라우저, 장치, 허용되는 언어, 허용되는 형식 등과 같은 대부분의 정보를 얻을 수 있습니다.위에서 언급한 사용자 에이전트는 요청 헤더의 일부입니다.

좋아, 여기에 매우 간단한 대답이 있습니다. 사용자가 결정하게하는 것은 어떻습니까? AP에 로그인하면 모바일 사이트에 대한 링크를 제공하십시오. 모바일 사이트에서 "기본 사이트로 돌아 가기"링크를 제공합니다 - 모바일 장치에서 www.fazolis.com을 사용해보십시오.이 작업을 잘 수행합니다.

그런 다음 브라우저 사이트에서 모바일 사이트에 대한 링크에서 "투표"및 사용자 에이전트를 등록하십시오. 자신만의 신뢰할 수있는 목록을 작성할 수 있습니다 당신의 모바일 사이트를 원하는 고객. 이 모바일 장치의 화면 크기에 대한 사양과 결혼하면 만족스러운 사용자 경험을위한 좋은 논리를 구축 할 수 있습니다. 나는 이것과 같은 초등학교에 대한 네트워크 소스에 결코 게시하지 않을 것입니다.

아, 그리고 "모바일 사이트" - AP를 의미 적으로 잘 작성하면 모바일 및 브라우저 모두에 대한 단일 사이트를 제시 할 수 있어야합니다. 단지 생각할 것입니다 - 이것은 나중에 시간을 절약하기위한 추가적인 생각과 노력의 가치가 있습니다.

여기에 게시 된 것을 볼 수는 없지만 현재보고있는 또 다른 옵션은 다음과 같습니다. www.detectmobilebrowser.com

가장 쉬운 방법은 모바일 브라우저와 관련된 일반 태그가있는 배열을 만드는 것입니다. 최소한 대부분의 모바일 사용자 에이전트는 Mobile, Mini, Nokia, Java ME, Android, iPhone, Mobile OS 등이라는 단어가 있어야합니다. PHP STRPOS를 사용하여 사용자 에이전트와 일치하는 경우 페이지 상단에 모바일 버튼을 인쇄합니다. . 사용자가 선택하도록 맡기십시오. 나는 대부분의 시간을 확대하거나 스크롤해야한다는 점을 제외하고는 모바일 브라우저가 동일한 경험을 제공하는 전체 사이트를 좋아합니다.

이전에 정의 된 목록이있는 사용자 에이전트 문자열을 확인해야합니다. 이 같은

웹 서비스를 사용하여 HandsetDetection.com과 같은 모바일 브라우징을 감지 할 수 있습니다.

사실, 사용자 기관에 의존하는 것은 모바일 브라우저를 감지하기에 충분하지 않습니다.

물론, 몇 년 전 당신은 특정 줄을 검색하고 그것이 노키아 나 무언가라고 추측 할 수 있었지만 지금은 너무 많은 전화가 있고, 더 많은 것이 필요하지 않은 것들을 척하는 많은 사람들이 있습니다.

나는 훌륭한 사이트를 찾았다 링크 텍스트이는 MTV가 모든 모바일 웹 사이트에 사용하는 것과 동일한 솔루션을 기반으로합니다. 장치 독립적 인 마크 업 언어를 가지고 있기 때문에 정말 좋습니다. 그러나 더 중요한 것은 ismobiledevice ()에 대한 웹 서비스 호출을 제공합니다.

매뉴얼을보고 '어떻게 작동하는지'.

고객 사이트에 사용해 왔지만 아직 정확하게 감지하지 못하는 모바일 브라우저를 찾지 못했습니다. 완전히 눈을 멀게합니다!

그냥 가로 질러 달렸다 모바일 웹의 장치 및 기능 감지 이러한 내용으로 :

모바일 웹에서 사용자 경험을 향상시키기 위해 장치 및 기능 감지 사용
장치 탐지 소개
모바일 사이트 설계에 대한 접근
1. 아무것도하지 마세요
2. 일반적인 모바일 사이트 제공
3. 모바일 및 적응을 염두에두고 설계
컨텐츠 적응 및 장치 그룹화 전략
1. 장치 그룹화
2. 내용 적응
처음에 적응의 필요성을 최소화합니다
장치 감지에 대한 일반적인 접근법
1. 서버 측 적응
2. 클라이언트 측 적응
3. 서버 측 사용자 에이전트 (UA) 및 헤더 조회
4. 서버 측 UA 문자열은 장치 데이터베이스 조회와 결합되었습니다
5. 서버 측 사용자 에이전트 프로파일 (UAPROF) 감지
6. JavaScript 기술을 기반으로 한 탐지
7. CSS 미디어 유형
8. CSS 미디어 쿼리
추가 모범 사례
1. 리디렉션 + 수동 링크
2. 방문 페이지 + 수동 링크
다운로드 가능한 샘플 페이지

WURFL API를 사용하여 장치 유형을 감지 할 수 있습니다

http://wurfl.sourceforge.net/wurfl_schema.php

또는 현대화 브라우저 능력을 감지합니다

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow