iOS 와 Android 및 PC 단 판단

모 바 일 을 할 때 navigator. userAgent 로 브 라 우 저 유형 을 판단 하고 자 료 를 찾 아 정리 한 것 이 생각 납 니 다.
또 하 나 는 모 바 일 엔 드 의 크기 조정 문제 입 니 다. meta 태그 에 설정 하여 일부 브 라 우 저 를 강제 적 으로 제한 합 니 다.
1. navigator 의 일반적인 속성

navigator 는 window 대상 의 속성 으로 브 라 우 저 관련 정 보 를 포함 하 는 대상

을 가리킨다.

navigator.appVersion         
navigator.language          
navigator.userAgent     userAgent  

그 중에서 userAgent 속성 은 읽 기 전용 문자열 로 브 라 우 저가 HTTP 요청 에 사용 할 사용자 에이전트 의 값 을 설명 합 니 다.
2. 흔히 볼 수 있 는 ios 엔 드, 안 드 로 이 드 엔 드 및 PC 엔 드 의 판단

간단하게

/*         */
let userAgent = navigator.userAgent;
/*        */
let app = navigator.appVersion;
/* Android    */
let isAndroid = userAgent.indexOf('Android');
/* ios   */
let isMac = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

봉인 적

/*         */
const browser = {
   version: function() {
       const userAgent = navigator.userAgent;
       return {
           /*      ios */
           ios: !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
           /*      Android */
           android: userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1,

           /*          */
           mobilePhone: !!userAgent.match(/AppleWebKit.*Mobile.*/),

           /* IE   */
           trident: userAgent.indexOf('Trident') > -1,
           /* opera   */
           presto: userAgent.indexOf('Presto') > -1,
           /*   、     */
           webkit: userAgent.indexOf('AppleWebKit') > -1,
           /*      */
           gecko: userAgent.indexOf('Gecko') > -1 && userAgent.indexOf('KHTML') == -1,


           /*      IPone    QQHD    */
           iphone: userAgent.indexOf('iPhone') > -1,
           /*      iPad */
           iPad: userAgent.indexOf('iPad') > -1,

           /*      web    (                )，        */
           webApp: userAgent.indexOf('Safari'),
           /*       */
           weixin: userAgent.indexOf('MicroMessenger'),
           /* QQ */
           QQ: userAgent.match(/\sQQ/i) == ' qq',
      }
   }(),
   /*           :navigator.language IE             ， 
    * navigator.browserLanguageIE         
    */
   browserLanguage: (navigator.language || navigator.browserLanguage).toLowerCase()
};
if(browser.version.ios || browser.version.android || browser.version.mobilePhone) {
  console.log('    ');
}

3. meta 태그 설정

예 를 들 어 브 라 우 저 를 전체 화면 으로 강제 설정 (UC 전체 화면), webapp 모드 등

열심히 공부 하고 있 습 니 다. 공부 에 도움 이 된다 면 흔적 을 남 겨 두 세 요. (좋아요 ^ ^)

좋 은 글 추천:

웹 팩 패키지 (면접 문제 있 음)

순수 css 폭포 흐름 실현 (multi - column 다 열 및 flex 레이아웃)

삼각형 을 그리다