자동 감지 모바일 브라우저 (사용자 에이전트를 통해?) [닫기
https://stackoverflow.com/questions/1005153
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
사용자가 모바일 웹 브라우저에서 내 웹 사이트를보고있는 경우 내 웹 사이트의 적절한 버전을 자동 감지하고 표시 할 수 있도록 어떻게 감지 할 수 있습니까?
해결책
예, 사용자 에이전트 헤더를 읽으면 트릭이됩니다.
일부가 있습니다 기울기 밖으로 알려진 모바일 사용자 에이전트가 있으므로 처음부터 시작할 필요가 없습니다. 내가해야했던 일은 알려진 사용자 에이전트의 데이터베이스를 구축하고 개정을 위해 감지 된 다음 수동으로 그들이 무엇인지 알아내는 것을 저장하는 것입니다. 이 마지막은 경우에 따라 과잉 일 수 있습니다.
Apache 수준에서 수행하려면 사용자 에이전트를 확인하는 일련의 다시 작성 규칙 세트 (또는 한 번에 새로운 사용자 에이전트를 잊어 버리거나 한 달에 한 번, 케이스에 적합한 경우)를 주기적으로 생성하는 스크립트를 만들 수 있습니다.
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1
예를 들어 요청이 이동합니다 http : //domain/index.html 에게 http : //domain/mobile/index.html
스크립트가 htaccess 파일을 재현하는 접근 방식이 주기적으로 마음에 들지 않으면 사용자 에이전트를 확인하는 모듈을 작성할 수 있습니다 (이미 만들어진 것을 찾지 못했지만 특히 적절하다고 판단했습니다. 예시)) 그리고 일부 사이트에서 사용자 에이전트를 업데이트하도록하십시오. 그런 다음 원하는만큼 접근 방식을 복잡하게 할 수 있지만 귀하의 경우 이전 접근 방식은 괜찮을 것이라고 생각합니다.
다른 팁
오픈 소스 스크립트가 있습니다 모바일 브라우저를 감지합니다 이는 Apache, ASP, Coldfusion, JavaScript 및 PHP에서이를 수행합니다.
단지 생각이지만 반대 방향 에서이 문제를 해결했다면 어떨까요? 어떤 브라우저가 모바일인지 결정하는 대신 어떤 브라우저가 아닌지 결정하지 않겠습니까? 그런 다음 사이트를 모바일 버전으로 기본값으로 코딩하고 표준 버전으로 리디렉션하십시오. 모바일 브라우저를 볼 때 두 가지 기본 가능성이 있습니다. JavaScript 지원이 있거나 그렇지 않습니다. 따라서 브라우저에 JavaScript 지원이 없으면 모바일 버전으로 기본값이됩니다. JavaScript 지원이있는 경우 화면 크기를 확인하십시오. 특정 크기 미만의 것은 모바일 브라우저 일 것입니다. 더 큰 것은 표준 레이아웃으로 리디렉션됩니다. 그런 다음 JavaScript 비활성화 된 사용자가 모바일인지 아닌지를 결정하기 만하면됩니다.
W3C에 따르면 JavaScript가 장애가있는 사용자의 수는 약 5%였으며 그 중 가장 사용자는 대부분 브라우저에서 수행하는 작업을 실제로 알고 있음을 의미합니다. 그들은 당신의 청중의 많은 부분입니까? 그렇지 않다면 그들에 대해 걱정하지 마십시오. 그렇다면 최악의 시나리오는 무엇입니까? 해당 사용자가 귀하의 사이트의 모바일 버전을 탐색하는 것이 좋습니다.
JavaScript에서 수행하는 방법은 다음과 같습니다.
function isMobile() {
var index = navigator.appVersion.indexOf("Mobile");
return (index > -1);
}
예제를 참조하십시오 www.tablemaker.net/test/mobile.html 휴대 전화에서 글꼴 크기를 3 배로 늘립니다.
내가 가장 좋아하는 모바일 브라우저 감지 메커니즘은 다음과 같습니다 wurfl. 자주 업데이트되며 모든 주요 프로그래밍/언어 플랫폼에서 작동합니다.
CSS3 미디어 쿼리 사용을 고려해 보셨습니까? 대부분의 경우 사이트의 별도의 모바일 버전을 만들지 않고도 대상 장치에 특별히 CSS 스타일을 적용 할 수 있습니다.
@media screen and (max-width:1025px) {
#content {
width: 100%;
}
}
원하는대로 너비를 설정할 수는 있지만 1025는 iPad Landscape View를 포착합니다.
또한 다음 메타 태그를 머리에 추가하고 싶을 것입니다.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
체크 아웃 이 기사 좋은 사례를 얻으려면 HTML5 바위에서
~을 위한 Android, iPhone, iPad, Blackberry, Palm, 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>
모바일 장치 브라우저 파일은 ASP.NET 프로젝트를위한 모바일 (및 기타) Broswers를 감지하는 좋은 방법입니다. http://mdbf.codeplex.com/
모바일 클라이언트를 간단히 감지 할 수 있습니다 navigator.userAgent 감지 된 클라이언트 유형을 기반으로 대체 스크립트를로드합니다.
$(document).ready(function(e) {
if(navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)) {
//write code for your mobile clients here.
var jsScript = document.createElement("script");
jsScript.setAttribute("type", "text/javascript");
jsScript.setAttribute("src", "js/alternate_js_file.js");
document.getElementsByTagName("head")[0].appendChild(jsScript );
var cssScript = document.createElement("link");
cssScript.setAttribute("rel", "stylesheet");
cssScript.setAttribute("type", "text/css");
cssScript.setAttribute("href", "css/alternate_css_file.css");
document.getElementsByTagName("head")[0].appendChild(cssScript);
}
else{
// write code for your desktop clients here
}
});
사용자 에이전트 문자열을 확인할 수 있습니다. JavaScript에서는 정말 쉽습니다. 네비게이터 개체의 속성 일뿐입니다.
var useragent = navigator.userAgent;
JS의 iPhone 또는 BlackBerry가
var isIphone = !!agent.match(/iPhone/i),
isBlackberry = !!agent.match(/blackberry/i);
Isiphone이 사실이라면 iPhone에서 사이트에 액세스하는 것이 좋습니다. IsBlackBerry가 BlackBerry에서 사이트에 액세스하는 경우.
Firefox에 "UserAgent Switcher"플러그인을 사용하여이를 테스트 할 수 있습니다.
관심이 있으시면 내 스크립트를 확인하는 것이 가치가있을 수 있습니다. "Rediprection_mobile.js" 여기 Github에서 주최합니다 https://github.com/sebarmeli/js-redirection-mobile-site 그리고 내 기사 중 하나에서 자세한 내용을 읽을 수 있습니다.
http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-through-javascript/
protected void Page_Load(object sender, EventArgs e)
{
if (Request.Browser.IsMobileDevice == true)
{
Response.Redirect("Mobile//home.aspx");
}
}
이 예제는 ASP.NET에서 작동합니다
당신은 어떤 언어를 사용하고 있는지 말하지 않았습니다. 그것이 perl이라면 그것은 사소한 일입니다.
use CGI::Info;
my $info = CGI::Info->new();
if($info->is_mobile()) {
# Add mobile stuff
}
unless($info->is_mobile()) {
# Don't do some things on a mobile
}
예, 사용자 에이전트는 모바일 브라우저를 감지하는 데 사용됩니다. 이를 확인할 수있는 무료 스크립트가 많이 있습니다. 여기에 그 중 하나가 있습니다 PHP 코드 모바일 사용자를 다른 웹 사이트로 리디렉션하는 데 도움이됩니다.
이 데모를 스크립트와 함께 포함 시켰습니다.
http://www.mlynn.org/2010/06/mobile-device-detection-and-rection-with-php/
이 예제는 사용자 에이전트 감지에 PHP 기능을 사용하고 사용자가 브라우저 또는 장치 유형을 기반으로 기본값이 아닌 사이트 버전에 대한 선호도를 명시 할 수있는 추가 이점을 제공합니다. 이것은 쿠키로 이루어집니다 (JavaScript가 아닌 서버 측에서 PHP를 사용하여 유지 관리합니다.)
예제는 기사에서 다운로드 링크를 확인하십시오.
당신이 즐기기를 바랍니다!
MobileSp PHP, Java, Aps.net (C#), Ruby 및 JavaScript 후크가 있습니다. 또한 Apache 2 라이센스가 있으므로 상업용 용도로 무료입니다. 나에게 중요한 것은 화면 크기가 아닌 브라우저와 플랫폼 만 식별하는 것입니다.
Zend 프레임 워크를 사용하는 새로운 솔루션이 있습니다. zend_http_useragent로 링크에서 시작하십시오.
