JavaScript는 프론트 엔드 개발의 주요 언어입니다. JavaScript에서 브라우저 유형을 판단하는 두 가지 방법은 다양한 브라우저의 고유 한 속성에 따라이를 구별하는 것입니다. 이 기사는 브라우저 각각의 사용자 기관의 특성을 분석하고 판단 방법을 제공합니다.
Windows 운영 체제 브라우저 시리즈 :
IE 브라우저 시리즈 :
특성 : 모두 "Mozilla/"로 시작하고 "MSIE X.0"에서 X;
판단 방법 : "MSIE X.0"을 검색 할 수 있습니다.
Windows 용 Firefox :
특징 : "Wind
판단 방법 : 거친 판단을 위해 "Firefox/"및 "Windows NT"문자열 만 검색 할 수 있습니다. Firefox/";
Windows 용 Chrome :
특징 : "Wind
판단 방법 : 대략 판사, "Wind /"5 줄;
Windows 용 오페라 :
특성 : "Opera/"로 시작하여 "Windows NT", "Presto/"문자열을 포함합니다.
판단 방법 : 대략 "Wind
Windows 용 Safari :
특성 : "Mozilla/"로 시작하여 "Windows NT", "AppleWebkit/", "Safari/";
판단 방법 : "Windows NT", "Safari/"를 검색 할 수 있습니다. /"그러나"Chrome/"는 포함되지 않습니다.
요약 : Windows 운영 체제의 브라우저 UserAgent에는 Windows 운영 체제를 나타내는 "Windows NT"문자열이 포함되어 있습니다.
iPhone 플랫폼 브라우저 시리즈 :
iPhone은 Safari와 함께 제공됩니다.
특성 : "Mozilla/"로 시작하여 "iPhone"문자열이 포함되어 있으며 "Mobile/", "Safari/"문자열도 포함되어 있습니다.
판단 방법 : "iPhone"및 "safari/"문자열 만 검색하는 것만 대략 판단하십시오.
iPhone 용 Opera Mobile :
특성 : "Opera/"로 시작하여 "iPhone"문자열이 포함되어 있으며 "Opera Mini/", "Presto/"문자열도 포함되어 있습니다.
판단 방법 : "iPhone"및 "Opera/"문자열에 대한 검색 만 심사 위원은 "Opera/", "iPhone", "Opera Mini/", "Presto/"Four Strings를 모두 포함해야합니다.
요약 : iPhone 휴대폰의 브라우저 useragent에는 "iPhone"문자열이 포함되어 있습니다.
Android 플랫폼 브라우저 시리즈 :
Android는 브라우저와 함께 제공됩니다 (일부 사람들은 Chrome이라고 말하지만 Google은 진술을하지 않으며 Android에서 실행되는 Chrome To Phone을 개발하고 있습니다).
특성 : "Mozilla/"로 시작하여 "Android"및 "Linux"문자열을 포함하며 "Applewebkit/", "Mobile Safari/"스트링을 포함합니다.
판단 방법 : 앞으로 안드로이드에 독립적 인 사파리가 있을지 모르겠으므로 (그렇지 않을 것 같아요), 직접 엄격한 판단을하고 "모질라/", "안드로이드", "를 검색하는 것이 좋습니다. Linux ","Applewebkit/","Mobile Safari/"5 줄
Android 용 Opera Mobile :
특성 : "Opera/"로 시작하여 "Android"및 "Linux"문자열을 포함하며 "Opera Mobi/", "Presto/"스트링도 포함합니다.
판단 방법 : 대략 판사 "Android"및 "Opera/"만 검색하며 엄격하게 심사위 원단은 "Opera/", "Android", "Linux", "Opera Mobi/", "Presto/"Five Strings를 모두 포함해야합니다.
Android 용 Firefox :
특성 : "Mozilla/", "Android"및 "Linux"문자열을 포함하고 "Firefox/", "Gecko/", "Fennec/"스트링을 포함하는 "Mozilla/"로 시작합니다.
판단 방법 : "안드로이드"및 "Firefox/"를 검색하는 대략 판단 및 엄격히 심사위 원단은 "Mozilla/", "Android", "Linux", "Firefox/", "Gecko/", "Fennec/"Six를 모두 포함해야합니다. 문자열
요약 : 안드로이드 플랫폼의 브라우저 userAgent에는 "Android"및 "Linux"문자열이 포함되어 있습니다.
Windows, iPhone 및 Android의 세 가지 주요 플랫폼의 주류 브라우저에 대한 위의 분석은 기본적으로 다른 플랫폼의 Linux는 Android 플랫폼과 유사한 것으로 추정됩니다. iPhone 플랫폼과 비슷하므로 당분간 나는 현재 분석을 수행하지 않을 것입니다. 테스트 할 장치와 운영 체제가 많지 않기 때문에 앞으로이를 보충 할 수 있기를 바랍니다.
현재 웹 사이트 제품 개발 요구 사항은 컴퓨터 브라우징을 충족해야 할뿐만 아니라 사용자의 스마트 폰을 충족해야하기 때문에 이전과 다릅니다 (여기서는 iPhone, Android, Wind Blackberry 및 Palm과 같은 Semi-intelligent 시스템은 Symbian의 의사 지능 시스템과 관련하여 고려되지 않습니다.) 브라우저 UserAgent를 기반으로 사용자 장비를 판단하십시오.
1. 운영 체제를 판단 해야하는 경우이 방법은 UserAgent에서 다음 문자열을 검색합니다.
"Windows NT"포함 : NT 이후의 버전 번호가 OS 버전을 결정할 수 있음이 분명합니다.
"Mac"을 포함하는 시스템 : Apple의 Mac OS X 또는 기타 Mac OS 커널;
"iPhone"을 포함합니다 : Apple iPhone 전화 전용이며 일반적으로 "Mac"도 포함해야합니다.
"iPad"가 포함되어 있습니다 : Apple iPad 태블릿 (정보는 iPad 브라우저 Useragent에 "Mac", "iPhone", "iPad"도 포함되어 있음을 보여줍니다.
"Linux"를 포함합니다 : Linux 운영 체제 또는 Linux가 커널을 사용하여 기타 운영 체제;
"Android": Google의 Android 운영 체제는 스마트 폰 또는 Android 버전의 태블릿 일 수 있습니다.
여기에는 세 가지 중 하나가 포함되어 있지만 UNIX 시스템이 포함되어 있지만 실제로이 시스템의 사용자 경험 문제는 거의 불필요합니다.
"Ubuntu"를 포함하는 Linux : Ubuntu 사용자 정의 버전
...
또한 운영 체제와 해당 버전을 판단하는 것이 항상 유용하지는 않지만 iPhone, iPad 및 Android 등과 같은 장치의 화면 해상도를 구체적으로 목표로하는 페이지를 개발하는 등 항상 사용할 수있는 장소가 있습니다.
2. 브라우저의 커널을 판단하는 것은 어렵지 않습니다.
IE (Trident) 커널 (예 : Mac, IES4Linux 등의 경우 Windows 고려) : "Mozilla/"로 시작하고 "Windows NT"및 "Msie"문자열을 포함합니다.
Firefox (Gecko) 커널 : "Mozilla/"로 시작하여 "Firefox/"및 "Gecko/"문자열이 포함되어 있으며, 그중에 Android 버전에는 "Fennec/"문자열이 있습니다.
Opera () 커널 : "Opera/"로 시작하여 "Presto/"문자열이 포함되어 있으며 iPhone 버전에는 "Opera Mini/"도 포함되어 있으며 Android 버전에는 "Opera Mobi/"도 있습니다.
WebKit 커널 : "Mozilla/"로 시작하고 "AppleWebkit/"및 "Safari/"의 문자열이 포함되어 있으며 "Chrome/"가있는 Chrome 브라우저는 Safari 또는 다른 사람이없는 사람입니다.
위는 메인 브라우저 커널입니다
브라우저 커널은 호환성을 해결하는 데있어 핵심 문제는 jQuery 및 ExtJ와 같은 프레임 워크에 의해 해결되었습니다 물론 동일한 커널은 스마트 폰 및 컴퓨터와 같은 다양한 장치의 결과를 렌더링하므로주의를 기울여야합니다.
3. 브라우저의 실제 적용의 예 :
브라우저 커널은 jquery와 extjs가 이미 우리에게 호환되었지만 현재는 브라우저 커널을 판단 해야하는 작은 차이점이 있습니다.
사용자는 컴퓨터를 통해 웹 사이트에 액세스 할뿐만 아니라 스마트 폰의 인기와 태블릿의 인기가 높아질 수 있습니다. 태블릿은 괜찮습니다. 화면은 크고 높은 해상도가 있습니다. 당신이 맞습니까? 결국, 로컬 확대 / 축소 및 드래그를 통해 웹 페이지를 시청하는 것은 매우 불편합니다. 속도 업 액세스;
방문자 트래픽 분석을하고 고객 브라우저 유형을 판단하고 고객 경험을 개별적으로 개선하기 위해 고객 수를 기록하여 자신의 웹 사이트를 최적화하고 설계하십시오.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
var sys = {};
var ua = navigator.useragent.tolowercase ();
var s;
(s = ua.match (/msie ([/d.] +)/))?
(s = ua.match (/firefox // ([/d.]+)/))?
(s = ua.match (/chrome // ([/d.]+)/))?
(s = ua.match (/opera. ([/d.]+)/))?
(s = ua.match (/버전 // ([/d.]+).*safari/)?
// 다음 테스트
if (sys.ie) document.write ( '즉 :' + sys.ie);
if (sys.firefox) document.write ( 'firefox :' + sys.firefox);
if (sys.chrome) document.write ( 'Chrome :' + sys.chrome);
if (sys.opera) document.write ( 'Opera :' + sys.opera);
if (sys.safari) document.write ( 'safari :' + sys.safari);
</스크립트>
또는:
Kindeditor 오픈 소스 편집기 소스 코드에서 브라우저 감지 방법 :
ke = {};
ke.Browser = (function () {
var ua = navigator.useragent.tolowercase ();
반품 {
버전 : ua.match (/(msie | firefox | webkit | Opera) [// :/s] (/d+)/)?
IE : (ua.indexof ( "msie")> -1 && ua.indexof ( "opera") == -1),
gecko : (ua.indexof ( "gecko")> -1 && ua.indexof ( "khtml") == -1),
webkit : (ua.indexof ( "Applewebkit")> -1),
오페라 : (ua.indexof ( "Opera")> -1)
};
}) ();