JavaScript는 프론트 엔드 개발의 주요 언어입니다. JavaScript 프로그램을 작성하여 브라우저의 유형과 버전을 결정할 수 있습니다. 일반적으로 JavaScript가 브라우저 유형을 결정하는 방법에는 두 가지가 있습니다. 하나는 다양한 브라우저의 고유 속성을 기반으로 하고, 다른 하나는 브라우저의 userAgent 속성을 분석하여 결정합니다. 이 기사에서는 브라우저의 userAgent 특성을 분석하고 판단 방법을 제시합니다.
Windows 운영 체제 브라우저 시리즈:
IE 브라우저 시리즈:
특성 성능: 모두 "로 시작합니다. mozilla/" 및 x.0(호환; msie x.0; windows nt"이지만 일반적으로 필요하지는 않습니다.
Windows용 Firefox:
기능: "mozilla/x.0"으로 시작, 포함 "windows nt"," gecko/" 및 "firefox/";
판단 방법: 대략적인 판단은 "firefox/" 및 "windows nt" 문자열만 검색할 수 있으며, 엄격한 판단은 "mozilla/", "windows nt를 검색할 수 있습니다. ", "gecko/" 및 "firefox/" 4개의 문자열;
Windows용 Chrome:
특성: "mozilla/x.0"으로 시작하고 "windows nt", "chrome/"도 포함 "applewebkit/" ,"safari/"
판단 방법: 대략적인 판단은 "windows nt" 및 "chrome/" 문자열만 검색할 수 있으며 엄격한 판단은 "mozilla/", "windows nt", "applewebkit/"을 검색할 수 있습니다. ," safari/", "chrome/" 5개 문자열;
Windows용 Opera:
특성: "opera/"로 시작하고 "windows nt", "presto/" 문자열 포함
판단 방법: 대략적으로 "windows nt" 및 "opera/" 문자열만 검색하도록 판단하고, "opera/", "windows nt" 및 "presto/"를 동시에 검색하도록 엄격히 판단합니다.
Windows용 Safari:
기능 성능: "mozilla/"로 시작하고 "windows nt", "applewebkit/", "safari/"를 포함합니다.
판단 방법: "windows nt", "safari/"로 검색하면 대략적인 판단이 가능하지만, "chrome/" "이 아니라 "mozilla/", "windows nt", "applewebkit/", "safari/"를 포함해야 하지만 "chrome/"은 포함하지 않는 엄격한 판단이 필요합니다.
요약: Windows 운영 체제의 브라우저 userAgent 시스템에는 모두 Windows 운영 체제를 나타내는 "windows nt" 문자열이 포함되어 있습니다.
iPhone 플랫폼 브라우저 시리즈:
iPhone은 Safari와 함께 제공됩니다.
특성: "mozilla/"로 시작하고 "iphone" 문자열을 포함하며 "mobile/"도 포함합니다. safari/" string;
판정 방법: 대략적인 판단은 "iphone"과 "safari/" 문자열만 검색하며, 엄밀한 판단은 "mozilla/", "iphone", "mobile/", "safari" /"4개를 포함해야 함 문자열
iPhone용 Opera Mobile:
특성: "opera/"로 시작하고 "iphone" 문자열을 포함하며 "opera mini/" 및 "presto/" 문자열도 포함합니다.
판정 방법: 대략적인 판단에서는 "iphone" 및 "opera/" 문자열만 검색하고 엄격한 판단에서는 "opera/", "iphone", "opera mini/", "presto/"의 4개 문자열을 포함해야 합니다.
요약: 브라우저 userAgent iPhone에는 모두 "iphone" 문자열이 포함되어 있습니다.
안드로이드 플랫폼 브라우저 시리즈:
안드로이드 자체 브라우저(어떤 사람들은 실제로는 크롬이라고 하지만 구글 자체는 아무런 표현도 하지 않았으며 여전히 Android에서 실행되는 Chrome to Phone 개발):
특성: "mozilla/"로 시작하고 "android" 및 "linux" 문자열을 포함하며 "applewebkit/", "mobile safari/" 문자열도 포함합니다.
판단 방법: 안드로이드에 독립 사파리가 앞으로 나올지(아마도) 아직 알 수 없기 때문에 엄밀히 직접 판단하고 "mozilla/", "android", "linux", "applewebkit/","mobile safari/" 5개의 문자열
Android용 Opera Mobile:
특성: "opera/"로 시작하고 "android" 및 "linux" 문자 포함 "opera mobi/" 및 "를 포함하는 문자열 presto/" strings;
판단 방법: 대략적인 판단은 "android"와 "opera/"만 검색하고 엄격한 판단은 "opera/"와 "android"를 모두 필요로 함 , "linux", "opera mobi/", "presto /" 다섯 개의 문자열
Android용 Firefox:
특성: "mozilla/"로 시작하고 "android" 및 "linux" 문자열 포함, "firefox/", "gecko/", "fennec/" 문자열 포함 동시에
판단 방법: 대략적인 판단은 "android"와 "firefox/"만 검색하고 엄격한 판단은 "mozilla/", "android", "linux", "firefox/", "gecko/"를 모두 검색해야 합니다. , "fennec/" 6개 문자열
요약: Android 플랫폼의 브라우저 userAgent에는 "android" 및 "linux" 문자열이 포함되어 있습니다.
위의 Windows, iPhone의 세 가지 주요 플랫폼에 대한 주류 브라우저 분석 그리고 Android는 기본적으로 끝났습니다. 다른 플랫폼의 Linux는 적어도 Android 플랫폼과 유사할 것으로 추정되는 반면, Mac OS를 사용하는 iPad와 Macintosh는 iPhone 플랫폼과 유사해야 하므로 당분간 분석은 하지 않겠습니다. 왜냐하면 테스트할 장치와 운영 체제가 너무 많지 않기 때문입니다. 나중에 이를 보완할 수 있기를 바랍니다.
오늘날의 웹사이트 제품 개발 요구사항은 이전과 달라졌습니다. 컴퓨터 브라우징뿐만 아니라 스마트폰을 통한 사용자도 만족시켜야 하기 때문입니다. (여기서는 iPhone, Android, Windows Phone, Blackberry 등 실제 스마트폰만을 의미합니다.) Palm과 같은 틈새 준지능 시스템은 당분간 고려하지 않겠습니다. 유사 지능 시스템인 Symbian을 가지고 놀아 보겠습니다.) 위의 세 가지 대표적인 플랫폼을 통해 우리는 솔루션을 대략적으로 추측할 수도 있습니다. 브라우저 userAgent를 기반으로 하는 사용자 장치입니다.
1. 운영 체제를 확인해야 하는 경우 방법은 비교적 간단합니다. userAgent에서 다음 문자열을 검색하세요.
"windows nt" 포함: 분명히 Windows 운영 체제는 nt 뒤의 버전 번호는 OS 버전을 확인할 수 있습니다.
"mac" 포함: Apple's Mac OS ;
"ipad" 포함: Apple iPad 태블릿 컴퓨터(데이터에 따르면 iPad의 브라우저 userAgent에도 "mac"이 포함되어 있음) iphone", "ipad");
"linux" 포함: Linux 운영 체제 또는 기타 Linux는 커널 운영 체제입니다.
"android" 포함: Google의 Android 운영 체제(스마트폰 또는 Android 버전일 수 있음) 일반적으로 Android 플랫폼의 userAgent에는 "linux"도 포함되어야 합니다.
에는 Unix 시스템인 "unix", "sunos" 및 "bsd" 중 하나가 포함되어 있습니다. 실제로 이 사용자 경험은 시스템은 현재 거의 무시될 수 있습니다.
"ubuntu" 포함: ubuntu 맞춤형 버전의 Linux
...
또한 운영 체제와 그 운영체제를 결정하는 것이 항상 유용한 것은 아니라는 점을 확인했습니다. 버전이지만 iPhone, iPad, Android 전용 개발 등 사용할 수 있는 곳은 항상 있습니다. 기기 화면 해상도가 있는 페이지를 기다리세요
2. 브라우저 커널을 결정하는 방법은 아닙니다. 스스로 알아냈지만 항상 정확하지는 않을 수도 있습니다.
IE(Trident) 커널(말할 필요도 없이 Mac용 IE, IEs4Linux 등은 Windows용 IE만 고려됩니다): 시작 "windows nt" 및 "msie" 문자열을 포함하는 "mozilla/",
Firefox(Gecko) 커널: " mozilla/"로 시작하고 "firefox/" 및 "gecko/" 문자열을 포함합니다. Android 버전에는 "fennec/" 문자열도 있습니다.
Opera () 커널: "opera/"로 시작하고 "presto/" 문자열을 포함하며, iPhone 버전에도 "opera mini/"가 있고 Android 버전에도 있습니다. "opera mobi/"가 있습니다.
Webkit 코어: "mozilla/"로 시작하고 "applewebkit/" 및 "safari/" 문자열을 포함합니다. "chrome/"이 있는 것은 Chrome 브라우저이고 없는 것은 Safari 또는 기타
위는 기본 브라우저 커널입니다
브라우저 커널은 호환성 문제를 해결하는 핵심 문제이지만 이 호환성 문제는 jQuery 및 따라서 이 판단은 개별 페이지의 CSS 스타일이 서로 다른 커널에서 서로 다른 렌더링 효과를 갖는 경우에만 사용됩니다. 물론 동일한 커널이 스마트폰 및 컴퓨터와 같은 서로 다른 장치에서 서로 다른 결과를 렌더링한다는 점도 주목할 필요가 있습니다.
3. 브라우저 사용 에이전트를 판단하기 위한 실제 응용 프로그램의 예:
jQuery와 Extjs가 호환성 처리를 수행했지만 여전히 브라우저 커널이 다릅니다. 이때는 브라우저 커널을 판단해야 합니다.
사용자는 스마트폰의 인기와 태블릿의 인기가 높아짐에 따라 이 두 가지를 사용하여 웹사이트에 액세스합니다. 인터넷 사용자의 비율이 점점 높아지고 있습니다. 어떻게 해야 할까요? 태블릿은 괜찮습니다. 큰 화면과 높은 해상도를 갖춘 스마트폰은 화면 크기와 해상도에 따라 제한됩니다. 비록 강력한 처리 능력을 갖고 있고 기존 웹 사이트를 완벽하게 지원할 수 있지만 고객을 더 많이 생각하는 것은 결코 나쁠 것이 없습니다. 결국, 부분 확대/축소 및 드래그를 통해 웹 페이지를 보는 것은 매우 불편합니다. 이때 iPhone 및 Android와 같은 좁은 화면용 레이아웃 전용 버전을 제공할 수 있습니다. 네트워크 트래픽을 줄여 액세스 속도를 높일 수 있습니다.
고객 브라우저 유형을 결정하고 숫자를 기록하여 웹사이트를 최적화하고 디자인하여 각각의 고객 경험을 향상할 수 있습니다
또는:
KindEditor 오픈 소스 편집기의 소스 코드에서 브라우저 감지 방법:
KE =
KE. browser = (function () {
var ua = navigator.userAgent.toLowerCase();
return {
VERSION:ua.match(/(msie|firefox|webkit|opera)[/:s] (d )/) ? RegExp .$2 : "0",
IE:(ua.indexOf("msie") > -1 && ua.indexOf("opera") == -1),
GECKO:(ua.indexOf( "gecko") > -1 && ua.indexOf("khtml") == -1),
WEBKIT:(ua.indexOf("applewebkit") > -1),
OPERA:(ua .indexOf("opera") > -1)
}
})();
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
