문제

우리는 모바일 장치를 위한 대체 버전의 웹사이트를 준비했습니다.우리가 제공하는 콘텐츠는 다르며 잘 작동합니다.

어떤 버전을 제공할지 감지하는 가장 좋은 방법은 무엇입니까?모든 모바일 장치 목록이 없으므로 사용자 에이전트 헤더를 사용하는 것은 뭔가를 놓칠 수 있기 때문에 까다롭습니다.

우리는 장치 화면 너비를 사용하는 것에 대해 생각했습니다. 하지만 모바일 장치가 자바스크립트를 지원하지 않으면 어떻게 될까요?어떻게 냄새를 맡을 수 있나요?

도움이 되었습니까?

해결책

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

귀하의 환경에 대해서는 언급하지 않으셨지만 WURFL은 Java 및 PHP용 API를 제공하며 어쩌면 다른 API도 제공할 수도 있습니다.제공된 API가 없는 경우에도 WURFL을 사용할 수 있지만 XML 데이터를 직접 구문 분석하고 처리해야 합니다.

다른 팁

Media = "Handheld"는 Desktop 브라우저 (화면 미디어 유형 사용) 인 iPhone과 같은 최신 스마트 폰에서 작동하지 않습니다.

http://detectmobilebrowser.com/무료 및 오픈 소스, JavaScript, PHP, ASP.NET, Ruby 등 다양한 언어로 제공되는 포괄적 인 모바일 사용자 에이전트 검사기가 있습니다.

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");
}

사용자가 자바 스크립트를 활성화했는지 여부를 감지하는 좋은/우아한 방법이 없다고 생각합니다.

IMO, 가장 좋은 것은 사용자 에이전트를 나열하는 것입니다. 여기 사용자 에이전트 목록으로, (프랑스어로, 슬프게도) 아주 완전한 것처럼 보입니다.

이것을 헤더에 넣으십시오.

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

거의 모든 사람의 컴퓨터 화면은 700px의 임계 홀드보다 높지만이 vaule은 변경할 수 있습니다. 700px 이상인 전화 나 태블릿이 없으므로 (적어도 아무 것도 모릅니다) 모든 모바일 분배가 모바일 사이트로 리디렉션됩니다.

대안 wurfl ~이다 모바일 감지, 탐지를위한 PHP 클래스 :

  • 태블릿
  • 이동하는
  • iOS
  • 기계적 인조 인간
  • 브라우저
  • 그리고 훨씬 더

그래서 경우에 wurfl 필요한 것을 수행하지 않으며 언제든지 확인할 수 있습니다.

Skaffman과 동의하면 다른 장치 데이터베이스가 있습니다 Deviceatlas. 그래도 이것에 대한 비용을 지불해야합니다.

장치가 JS를 지원하지 않으면 서버 측 솔루션을 고려하는 것이 좋습니다. wurfl API는 그 방향을 향해 도움을 줄 수 있습니다.

때때로 우리는 이런 종류의 접근 방식 (예 : 리버스 프록시 캐시 페이지 및 모바일 버전으로 리디렉션하지 않도록하는 문제를 피하거나 요즘 거의 모든 장치가 JS를 지원한다는 빠른 솔루션이 필요합니다.

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

어떤 경우에는 모바일 장치에서 데스크탑 버전으로 리디렉션하려면 ( "기본 사이트로 이동"링크와 같은) 스크립트가 처리하고 세션을 완료하면 다시 모바일 버전에 액세스 할 수 있습니다. .

GitHub에서 소스 코드를 찾을 수 있습니다 http://github.com/sebarmeli/js-redirection-mobile-site 그리고 내 기사 중 하나에서 자세한 내용을 읽을 수 있습니다.

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

단순한:

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

헤드 섹션에 넣으십시오.

다음은 작동 솔루션입니다

RewriteEngine On
RewriteBase /

#http://stackoverflow.com/questions/3680463/mobile-redirect-using-htaccess
# Check if mobile=1 is set and set cookie 'mobile' equal to 1
RewriteCond %{QUERY_STRING} (^|&)mobile=1(&|$)
RewriteRule ^ - [CO=mobile:1:%{HTTP_HOST}]

# Check if mobile=0 is set and set cookie 'mobile' equal to 0
RewriteCond %{QUERY_STRING} (^|&)mobile=0(&|$)
RewriteRule ^ - [CO=mobile:0:%{HTTP_HOST}]

# cookie can't be set and read in the same request so check
RewriteCond %{QUERY_STRING} (^|&)mobile=0(&|$)
RewriteRule ^ - [S=1]

# Check if this looks like a mobile device
RewriteCond %{HTTP:x-wap-profile} !^$ [OR]
RewriteCond %{HTTP_USER_AGENT} "android|blackberry|ipad|iphone|ipod|iemobile|opera mobile|palmos|webos|googlebot-mobile" [NC,OR]
RewriteCond %{HTTP:Profile}       !^$
RewriteCond %{QUERY_STRING} !^mobile=0(?:&|$)
# Check if we're not already on the mobile site
RewriteCond %{HTTP_HOST}          !^m\.
# Check to make sure we haven't set the cookie before
RewriteCond %{HTTP:Cookie}        !\mobile=0(;|$)
# Now redirect to the mobile site
RewriteRule ^ http://m.yourdomain.com%{REQUEST_URI} [R,L]

# Go back to full site
RewriteCond %{HTTP_HOST} ^m\.
RewriteCond %{QUERY_STRING} (?:^|&)mobile=0(?:&|$)
RewriteRule ^ http://yourdomain.com%{REQUEST_URI} [R,L]

RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [NC,L]

RewriteRule ^.*$ index.php [NC,L]
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top