휴대 전화 대 태블릿 감지

Question

사용자가 태블릿이나 휴대 전화를 사용하고 있는지 감지 할 수있는 방법이 있습니까? 예를 들어 태블릿 (버전 3 이상 및 iPad가있는 모든 Android 태블릿)을 사용하여 웹 서핑을하는 사람은 데스크톱 컴퓨터에 앉아있는 사람과 똑같은 버전을 벗겨 내고 싶어합니다. 그리고 전화 서퍼는로드 속도가 빨라지고 엄지 손가락으로 더 쉽게 탐색 할 수 있기 때문에 분명히 사이트의 버려진 버전을 선호합니다. 이는의 userAgent 10월 화면 폭은 여기에서 찾아 검사와 함께 할 수있다 :

What is the best way to detect a mobile device in jQuery?

그러나 문제는 태블릿과 같은 해상도 만 절반 화면 크기가 구글 갤럭시 넥서스와 같은 전화와 함께 제공됩니다. 해상도가 높더라도 화면이 작기 때문에 모바일 버전을 표시하는 것이 더 좋을 것이라고 생각합니다.

이 문제를 감지하는 방법이 있습니까? 아니면 절충해야합니까?

Answer 1

난 당신이 태블릿, 전화, 또는 여기에 다른 웹 지원 장치 사이에 근본적으로 임의의 차이를 만드는 것 같아요. 화면의 물리적 크기가 사용자가 제공하는 콘텐츠를 지정하는 데 사용하려는 측정 항목 인 것처럼 보입니다.

이 경우 HTTP 헤더 ([mobiforge.com...])에 사용자 에이전트가 전달한 값을 기반으로 로직을 구현하려고 시도하고 정보를 사용할 수없는 경우 사용자에게 메시지를 표시하도록 정상적으로 저하됩니다.

당신의 논리는 조금 다음과 같습니다 사용자 에이전트가 HTTP 헤더의 물리적 화면 크기
물리적 치수 = UA의 값을 제공

• 합니다.
  
• 사용자 에이전트 supplies a resolution and pixel dimensions
  실제 크기 = 픽셀 크기를 해상도로 나눈 값.
• (선택적으로) 그렇지 않으면, use client side script to detect resolution and PPI
• 그렇지 않으면, 사용자 에이전트 문자열을 선택하는 모바일 장치 (정규식)
  프롬프트 사용자의 일종처럼 보이는 경우.
• 
  은 기본 옵션으로 가정합니다.

---

업데이트는 : 내 대답은 이제 세살입니다. 반응 형 디자인에 대한 지원이 현저하게 진행되었으며, 모든 기기에 동일한 콘텐츠를 제공하고 css 미디어 쿼리를 사용하여 사이트를보고있는 기기에 가장 효과적인 방식으로 사이트를 제공하는 것이 일반적이라는 점은 주목할 가치가 있습니다. 그 이상의 서버 측 솔루션 이후 http://wurfl.sourceforge.net/help_doc.php 그것 좀 더 하드 코어보다는 (예를 들어, 단순히 간단한 미디어 쿼리를 통해 자신을 그 일을하거나 재단 CSS와 같은 프레임 워크를 사용하여 :

Answer 2

Device Atlas과 같은 것을 사용하여 사용자 에이전트에서 이러한 기능을 감지 할 수 있습니다. 스스로 호스팅 할 수있는 API를 제공하고 클라우드 서비스도 제공합니다. 둘 다 프리미엄 (유료)입니다

또는 Wurfl과 같은 것을 사용할 수 있습니다. 제 경험상 정확도가 떨어집니다.

Answer 3

왜 사용자가 물어볼 수 있는지 추측 해보십시오. 해상도를 사용하여 어떤 종류의 장치가 사용되고 있는지 추측 할 수 있으며 사용자가 모바일 또는 태블릿 범주에 속하는 경우 원하는보기를 사용자에게 요청할 수 있습니다. 당신이 그것을 잘못 발견한다면 그것은 사용자에게는 귀찮은 일입니다. 그들이 어떤 유형의 장치를 가지고 있는지 묻는 것은 제 의견으로는 더 편리합니다.

Answer 4

이론에서 미디어 쿼리를 사용하는 경우 @media 핸드 헬드를 사용할 수 있지만 지원은 거의 존재하지 않습니다. 창 고해상도에게 휴대 기기를 식별

간단한 방법은 화면의 DPI와 (현재 웹킷/모질라 벤더 고유 태그를 통해) 장치 화소 비율

@media (-webkit-max-device-pixel-ratio: 2), 
(max--moz-device-pixel-ratio: 2), 
(min-resolution: 300dpi) { 
    ... 
} 

수정을 볼 것이다. devicePixelRatio JS에서 위의 작업을 수행합니다.

모바일 장치를 식별하기위한 아이디어가 많은 멋진 기사가 여기에 있습니다.

http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript

Answer 5

나는 WURFL이보고 뭔가있을 것 같아요) 또는 순수한 자바 스크립트 (adapt.js).

보다 같은 뭔가를 할 수

:

$is_wireless = ($requestingDevice->getCapability('is_wireless_device') == 'true'); 
$is_smarttv = ($requestingDevice->getCapability('is_smarttv') == 'true'); 
$is_tablet = ($requestingDevice->getCapability('is_tablet') == 'true'); 
$is_phone = ($requestingDevice->getCapability('can_assign_phone_number') == 'true'); 

if (!$is_wireless) { 
if ($is_smarttv) { 
    echo "This is a Smart TV"; 
} else { 
    echo "This is a Desktop Web Browser"; 
} 
} else { 
if ($is_tablet) { 
    echo "This is a Tablet"; 
} else if ($is_phone) { 
    echo "This is a Mobile Phone"; 
} else { 
    echo "This is a Mobile Device"; 
} 
} 

심판 : http://wurfl.sourceforge.net/php_index.php

또는 자바 :

WURFLHolder wurfl = (WURFLHolder) getServletContext().getAttribute(WURFLHolder.class.getName()); 
WURFLManager manager = wurfl.getWURFLManager(); 
Device device = manager.getDeviceForRequest(request); 
String x = device.getCapability("is_tablet"); //returns String, not boolean btw 

심판 : 지금 현재, 유일한 http://wurfl.sourceforge.net/njava_index.php

Answer 6

불행하게도 모바일과 태블릿을 구별하는 신뢰할 수있는 방법은 사용자 에이전트 문자열

기기 크기가 포함 된 사용자 에이전트를 아직 찾지 못했습니다.

장치 ppi를 계산하려고하면 거의 필연적으로 데스크톱이나 전화를 필연적으로 96ppi로 나옵니다.

Apple 에이전트를 검색하기 위해 사용자 에이전트 문자열에서 iPad/iPod/iPhone을 검색하십시오. Apple의 타블렛이나 전화/iPod을 가지고 있다면 알려줍니다. 다행스럽게도 i 디바이스의 맛이 훨씬 적기 때문에 이들 사이를 구별하기가 더 쉽습니다.

Android 기기를 식별하려면 사용자 에이전트 문자열에서 "Android"로 검색하십시오. 태블릿이나 휴대 전화인지 확인하기 위해 휴대 전화 사용자 에이전트 (기본 Android 브라우저 및 Chrome 용)에는 '모바일 사파리'가 포함되지만 태블릿에는 '사파리'만 포함됩니다. 이 방법은 구글에 의해 추천 : 모바일 사이트에 대한 해결책으로

, 우리의 안드로이드 엔지니어는 특히 사용자 에이전트 문자열뿐만 아니라 "안드로이드에서"모바일 "감지 에 좋습니다."

풀러 설명은 여기에서 찾을 수 있습니다 : 물론

http://googlewebmastercentral.blogspot.com/2011/03/mo-better-to-also-detect-mobile-user.html

이 이상적이 아니라, 신뢰할 수있는 유일한 수단을 것 같아요. 경고로, 사용자 에이전트 문자열 (100 근처)의 대규모 샘플 목록을 보았을 때 "모바일"대 "모바일 사파리"구분을 제대로 준수하지 않은 하나 또는 두 개의 오래된 장치를 보았습니다.

Answer 7

Google의 제안에 따라 : found here (Greg가 참조 함) 이것은 내가 전에 프로젝트에서 사용한 것입니다.

if(/Mobile/i.test(navigator.userAgent) && !/ipad/i.test(navigator.userAgent)){ 
     console.log("it's a phone");//your code here 
    } 

아마도 가장 세련된 해결책은 아니지만 그 일을하는 것입니다.

Answer 8

많은 다른 포스터에서 언급했듯이 User-Agent 요청 헤더를 구문 분석하려고 할 것입니다. 이를 위해 ua-parser-js 라이브러리가 매우 유용하다는 것을 알게되었습니다. 당신이 코르도바를 사용하는 경우

Answer 9

나는이 좋아 :

cordova plugin add uk.co.workingedge.phonegap.plugin.istablet 

을 다음 어디서든 코드 호출이에 : BTW

window.isTablet