모바일 장치를 내 사이트의 대체 버전으로 리디렉션
-
12-09-2019 - |
문제
우리는 모바일 장치를 위한 대체 버전의 웹사이트를 준비했습니다.우리가 제공하는 콘텐츠는 다르며 잘 작동합니다.
어떤 버전을 제공할지 감지하는 가장 좋은 방법은 무엇입니까?모든 모바일 장치 목록이 없으므로 사용자 에이전트 헤더를 사용하는 것은 뭔가를 놓칠 수 있기 때문에 까다롭습니다.
우리는 장치 화면 너비를 사용하는 것에 대해 생각했습니다. 하지만 모바일 장치가 자바스크립트를 지원하지 않으면 어떻게 될까요?어떻게 냄새를 맡을 수 있나요?
해결책
장치 설명 데이터베이스(예: 워플) 요청 헤더에서 클라이언트 장치를 인식합니다.그런 다음 해당 데이터베이스를 쿼리하여 장치가 사이트를 처리할 수 있는지 결정할 수 있습니다(예:자바스크립트를 지원하는지, 아니면 화면이 충분히 큰지) 다른 사이트로 리디렉션할지 여부를 결정하세요.
귀하의 환경에 대해서는 언급하지 않으셨지만 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 이상인 전화 나 태블릿이 없으므로 (적어도 아무 것도 모릅니다) 모든 모바일 분배가 모바일 사이트로 리디렉션됩니다.
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]