判斷iOS和Android及PC端

DrizzleX 發布于2019-08-23 12:10 / 3235人閱讀

摘要：在做移動端時，想起用來對瀏覽器類型進行判斷，查了點資料，在這里總結下還有一個就是移動端的縮放問題，在標簽中進行設置，對部分瀏覽器進行強制性的限制的一些常用屬性為對象的一個屬性，指向了一個包含瀏覽器相關信息的對象瀏覽器的版本號瀏覽器使用的語言

在做移動端時，想起用navigator.userAgent來對瀏覽器類型進行判斷，查了點資料，在這里總結下
還有一個就是移動端的縮放問題，在meta標簽中進行設置，對部分瀏覽器進行強制性的限制

1.navigator的一些常用屬性

navigator為window對象的一個屬性，指向了一個包含瀏覽器相關信息的對象

navigator.appVersion 瀏覽器的版本號 
navigator.language 瀏覽器使用的語言 
navigator.userAgent 瀏覽器的userAgent信息

其中userAgent 屬性是一個只讀的字符串，聲明了瀏覽器用于 HTTP 請求的用戶代理頭的值。

2.較常見的ios端、Android端及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模式等

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

往期好文推薦：

webpack打包（有面試題）

純css實現瀑布流（multi-column多列及flex布局）

畫三角形

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98036.html

H5項目常見問題匯總及解決方案

摘要：解決方案可以解決在手機上點擊事件的延遲的模塊，事件也是為了解決在的延遲問題顯示屏原理及設計方案說明屏是一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由個變為多個，如在同樣帶下的屏幕上，蘋果設備的顯示屏中，像素點個變為個。原文鏈接 - https://github.com/FrontEndRo... H5項目常見問題及注意事項 Meta基礎知識： H5頁面窗口自動調整到設備...

marser 2019-08-20 14:08 評論0 收藏0
H5項目常見問題及注意事項

摘要：解決方案可以解決在手機上點擊事件的延遲的模塊，事件也是為了解決在的延遲問題顯示屏原理及設計方案說明屏是一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由個變為多個，如在同樣帶下的屏幕上，蘋果設備的顯示屏中，像素點個變為個。 Meta基礎知識： H5頁面窗口自動調整到設備寬度，并禁止用戶縮放頁面 //一、HTML頁面結構 // width 設置viewport寬度，為一...

honhon 2019-08-21 10:51 評論0 收藏0
H5項目常見問題及注意事項

摘要：解決方案可以解決在手機上點擊事件的延遲的模塊，事件也是為了解決在的延遲問題顯示屏原理及設計方案說明屏是一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由個變為多個，如在同樣帶下的屏幕上，蘋果設備的顯示屏中，像素點個變為個。 Meta基礎知識： H5頁面窗口自動調整到設備寬度，并禁止用戶縮放頁面 //一、HTML頁面結構 // width 設置viewport寬度，為一...

Little_XM 2019-08-30 13:07 評論0 收藏0