2009-07-13 2 views
19

휴대 기기 용 외부 웹 사이트를 준비했습니다. 우리가 제공하는 콘텐츠는 다르며 잘 작동합니다.휴대 기기를 내 사이트의 다른 버전으로 리디렉션

제공 할 버전을 확인하는 가장 좋은 방법은 무엇입니까? 모든 모바일 장치의 목록이 없으므로 사용자 에이전트 헤더를 사용하기가 어렵습니다. 뭔가 빠뜨릴 수 있습니다.

기기 화면 너비 사용을 고려했습니다.하지만 휴대 기기가 자바 스크립트를 지원하지 않으면 어떻게됩니까? 이걸 어떻게 알아낼 수 있니?

답변

24

요청 헤더에서 클라이언트 장치를 인식하는 장치 설명 데이터베이스 (예 : WURFL)를 사용할 수 있습니다. 그런 다음 해당 데이터베이스를 쿼리하여 장치를 다른 사이트로 리디렉션할지 여부를 결정하기 전에 장치에서 사이트를 처리 할 수 ​​있는지 (예 : 자바 스크립트 지원 또는 충분히 큰 화면인지) 결정할 수 있습니다.

환경을 언급하지는 않지만 WURFL은 Java 및 PHP 용 API를 제공하고 다른 API도 제공합니다. 제공된 API가 없다면 여전히 WURFL을 사용할 수 있지만 직접 XML 데이터를 구문 분석하고 처리해야합니다.

+2

모자가 존재한다는 것을 몰랐습니다. 내 솔루션보다 훨씬 낫다. –

2

사용자가 자바 스크립트를 활성화했는지 여부를 감지 할 수있는 좋은 방법은 없을 것이라고 생각합니다.

IMO, 가장 좋은 것은 사용자 에이전트를 나열하는 것입니다. here은 사용자 에이전트 목록입니다 (프랑스어로, 슬프게도).

+0

http://www.user-agents.org/ – abatishchev

0

Skaffman과 동의하면 다른 장치 데이터베이스는 DeviceAtlas입니다. 당신은이 하나를 지불해야합니다.

0

간단한은 :

<link rel="alternate" media="handheld" href="WEBSITE HERE"> 

넣어 머리 부분에 해당.

+0

-1 iPhone/iPod Touch 및 기타 스마트 폰은 '핸드 헬드'미디어 유형을 따르지 않습니다. 그들은 사이트의 일반 버전을 표시하기를 원합니다. 즉, 모바일 브라우저를 감지하기위한 몇 가지 다른 메커니즘이 필요합니다. –

+1

이것은 감지 방법이 아니며, 브라우저에 모바일 사이트를 어디에서 찾을 지 의미 론적으로 알려주는 방법입니다. – JKirchartz

+1

모바일 브라우저가 사이트의 모바일 버전을 원하고 그 선택 사항을 기억하도록 제안하는지 묻는 대화 상자를 표시하여 모바일 브라우저가 마크 업을 표준화하면 표준이 좋을 것입니다. – dbreaux

8

media = "handheld"는 데스크톱 브라우저 인 척하는 최신 스마트 폰에서는 작동하지 않습니다 (화면 미디어 유형 사용). 자바 스크립트, PHP는, asp.net, 루비 등

+0

먼저 detectmobilebrowser.com으로 리디렉션되므로 SEO에 좋지 않습니까? –

+2

실제로 코드의 해당 부분을 변경하여 * firecoding.com * 대신 ;-) – JoshuaDavid

+0

@FireCoding은 내가 본 sneakiest 코멘트입니다. –

0

장치가 JS를 지원하지 않는 경우입니다 -

http://detectmobilebrowser.com/ 무료 & 오픈 소스는 많은 언어에서 사용할 수있는 포괄적 인 모바일 사용자 에이전트 검사기를 가지고 서버 측 솔루션을 고려하는 것이 더 좋으며 WURFL API는 그 방향으로 나아갈 수 있습니다.

간혹 리버스 프록시 캐시 페이지 및 모바일 버전으로 리디렉션하지 않는 것과 같은 접근 방식으로 문제를 피하기를 원하거나 요즘 거의 모든 최신 장치가 JS를 지원한다는 빠른 해결책이 필요합니다.

이러한 이유로 브라우저의 사용자 에이전트를 감지하고 모바일 장치에서 액세스하는 경우 사이트의 모바일 버전으로 리디렉션하는 "redirection_mobile.js"라는 JS 스크립트를 작성했습니다.

모바일 장치에서 데스크톱 버전으로 리디렉션하려는 경우 (예 : "기본 사이트로 이동"링크와 같이) 스크립트가이를 처리하고 세션이 끝나면 다시 모바일 버전.

현재 http://github.com/sebarmeli/JS-Redirection-Mobile-Site를 GitHub의에 대한 소스 코드를 찾을 수 있습니다 그리고 당신은 여기에 나의 기사 중 하나에서 자세한 내용을 읽을 수 있습니다

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

3

그냥 헤더에 이것을 넣어 :

<script type="text/javascript"> 
<!-- 
    if (screen.width <= 700) { 
    window.location = "http://www.mobile-site.com"; 
    } 
//--> 
</script> 

모든 사람의 컴퓨터 화면은 700px의 임계 값을 초과하지만이 vaule은 변경 될 수 있습니다. 휴대 전화 나 태블릿이 700px 이상인 경우 (적어도 알지 못함) 모든 모바일 팀이 모바일 사이트로 리디렉션됩니다.

+1

일반 ipad는 해상도 1024x768, ipad retina 두 번. 그래서 나는 이것에 의존하는 것에 조심할 것입니다. – anyeone

+0

2015 년 현재이 답변은 사용되지 않습니다. – Martijn

2

WURFL에 대한 대안이 Mobile Detect, 검출하는 PHP 클래스입니다 :

  • 태블릿
  • 모바일
  • iOS 용
  • 안드로이드
  • 브라우저
  • 그리고 훨씬 더

따라서 WURFL이 필요한 것을하지 않는 경우 언제든지 확인할 수 있습니다.

5

JavaScript를 사용하여 모바일 사이트로 리디렉션하려는 경우, WURFL에도 JavaScript를 사용하여 서버 측 감지를 수행 할 수있는 솔루션이 있음을 발견했습니다.

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script> 
당신처럼 보이는 JSON 객체로 남아있을 것입니다

:

{ 
    "complete_device_name":"Apple iPhone 6", 
    "is_mobile":true, 
    "form_factor":"Smartphone" 
} 

그런 다음이를 사용할 수 있습니다

if (WURFL.is_mobile === true) { 
    window.location.replace("http://stackoverflow.com"); 
}