사용자가 모바일 웹 브라우저에서 내 웹 사이트를보고 있는지 감지하여 적절한 버전의 웹 사이트를 자동으로 감지하여 표시하려면 어떻게해야합니까?
답변
예, User-Agent 헤더를 읽으면 유용한 정보를 얻을 수 있습니다.
몇 가지가 있습니다 목록 밖으로 당신이 처음부터 시작할 필요가 없습니다가 알려진 모바일 사용자 에이전트는. 내가해야 할 때 알려진 사용자 에이전트의 데이터베이스를 작성하고 수정을 위해 감지 된 알 수없는 것을 저장 한 다음 수동으로 무엇인지 파악하는 것입니다. 이 마지막 일은 경우에 따라 과도 할 수 있습니다.
Apache 레벨에서 수행하려면 다음과 같이 사용자 에이전트를 검사하는 재 작성 규칙 세트를 주기적으로 생성하는 스크립트를 작성할 수 있습니다 (또는 한 번만 새 사용자 에이전트를 잊어 버리거나 한 달에 한 번).
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1예를 들어 http : //domain/index.html 에 대한 요청은 http : //domain/mobile/index.html 로 이동합니다 .
스크립트가 htaccess 파일을 주기적으로 재생성하는 방식이 마음에 들지 않으면 사용자 에이전트를 검사하는 모듈을 작성할 수 있습니다 (이미 만든 것이 없지만 특히 적절한 예를 찾았습니다 ). 일부 사이트에서 업데이트합니다. 그런 다음 원하는 방식으로 접근 방식을 복잡하게 만들 수 있지만 귀하의 경우 이전 방식은 좋을 것이라고 생각합니다.
답변
Detect Mobile Browser 에는 Apache, ASP, ColdFusion, JavaScript 및 PHP에서이를 수행 하는 오픈 소스 스크립트가 있습니다 .
답변
그냥 생각하지만이 문제를 반대 방향에서 일하면 어떨까요? 어떤 브라우저가 모바일인지 결정하지 않고 왜 어떤 브라우저가 아닌 브라우저를 결정하지 않습니까? 그런 다음 사이트를 모바일 버전으로 기본 코딩하고 표준 버전으로 리디렉션하십시오. 모바일 브라우저를 볼 때 두 가지 기본 가능성이 있습니다. 자바 스크립트를 지원하거나 지원하지 않습니다. 따라서 브라우저가 자바 스크립트를 지원하지 않으면 기본적으로 모바일 버전으로 설정됩니다. JavaScript를 지원하는 경우 화면 크기를 확인하십시오. 특정 크기 이하의 것은 모바일 브라우저 일 수도 있습니다. 더 큰 것은 표준 레이아웃으로 리디렉션됩니다. 그런 다음 JavaScript를 사용하지 않는 사용자가 모바일인지 아닌지를 결정하기 만하면됩니다.
W3C에 따르면 JavaScript가 비활성화 된 사용자의 수는 약 5 %였으며 대부분의 사용자가 브라우저를 끈다는 사실을 암시했습니다. 그들은 당신의 청중의 큰 부분입니까? 그렇지 않다면 걱정하지 마십시오. 그렇다면 최악의 시나리오는 무엇입니까? 해당 사용자가 모바일 버전의 사이트를 탐색하고 있다는 것은 좋은 일입니다.
답변
다음은 JavaScript에서 수행하는 방법입니다.
function isMobile() {
var index = navigator.appVersion.indexOf("Mobile");
return (index > -1);
}www.tablemaker.net/test/mobile.html 에서 예제를 참조하십시오. 이 글꼴은 휴대폰에서 글꼴 크기가 세 배입니다.
답변
내가 가장 좋아하는 모바일 브라우저 감지 메커니즘은 WURFL 입니다. 자주 업데이트되며 모든 주요 프로그래밍 / 언어 플랫폼에서 작동합니다.
답변
css3 미디어 쿼리 사용을 고려 했습니까? 대부분의 경우 별도의 모바일 버전 사이트를 만들지 않고도 대상 장치에 특별히 CSS 스타일을 적용 할 수 있습니다.
@media screen and (max-width:1025px) {
#content {
width: 100%;
}
}너비는 원하는대로 설정할 수 있지만 1025는 iPad 가로보기를 사용합니다.
또한 다음 메타 태그를 머리에 추가하고 싶을 것입니다.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">좋은 예는 HTML5 Rocks 에서이 기사 를 확인하십시오.
답변
대한 안드로이드, 아이폰, 아이 패드, 블랙 베리, 팜, WINDOWS CE, PALM
<script language="javascript"> <!--
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) {
alert("MOBILE DEVICE DETECTED");
document.write("<b>------------------------------------------<br>")
document.write("<b>" + navigator.userAgent + "<br>")
document.write("<b>------------------------------------------<br>")
var userAgent = navigator.userAgent.toLowerCase();
if ((userAgent.search("android") > -1) && (userAgent.search("mobile") > -1))
document.write("<b> ANDROID MOBILE <br>")
else if ((userAgent.search("android") > -1) && !(userAgent.search("mobile") > -1))
document.write("<b> ANDROID TABLET <br>")
else if ((userAgent.search("blackberry") > -1))
document.write("<b> BLACKBERRY DEVICE <br>")
else if ((userAgent.search("iphone") > -1))
document.write("<b> IPHONE DEVICE <br>")
else if ((userAgent.search("ipod") > -1))
document.write("<b> IPOD DEVICE <br>")
else if ((userAgent.search("ipad") > -1))
document.write("<b> IPAD DEVICE <br>")
else
document.write("<b> UNKNOWN DEVICE <br>")
}
else
alert("NO MOBILE DEVICE DETECTED"); //--> </script>