資訊專欄INFORMATION COLUMN
摘要：在做移動端時，想起用來對瀏覽器類型進行判斷，查了點資料，在這里總結(jié)下還有一個就是移動端的縮放問題，在標簽中進行設(shè)置，對部分瀏覽器進行強制性的限制的一些常用屬性為對象的一個屬性，指向了一個包含瀏覽器相關(guān)信息的對象瀏覽器的版本號瀏覽器使用的語言
在做移動端時，想起用navigator.userAgent來對瀏覽器類型進行判斷，查了點資料，在這里總結(jié)下1.navigator的一些常用屬性
還有一個就是移動端的縮放問題，在meta標簽中進行設(shè)置，對部分瀏覽器進行強制性的限制
navigator為window對象的一個屬性，指向了一個包含瀏覽器相關(guān)信息的對象
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內(nèi)核 */
trident: userAgent.indexOf("Trident") > -1,
/* opera內(nèi)核 */
presto: userAgent.indexOf("Presto") > -1,
/* 蘋果、谷歌內(nèi)核 */
webkit: userAgent.indexOf("AppleWebKit") > -1,
/* 火狐內(nèi)核 */
gecko: userAgent.indexOf("Gecko") > -1 && userAgent.indexOf("KHTML") == -1,
/* 判斷是否是IPone手機或者QQHD瀏覽器 */
iphone: userAgent.indexOf("iPhone") > -1,
/* 判斷是否是iPad */
iPad: userAgent.indexOf("iPad") > -1,
/* 判斷是否是web應(yīng)用程序(能夠讓用戶完成某些特定任務(wù)的網(wǎng)站)，沒有頭部和底部 */
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標簽設(shè)置
如對瀏覽器進行強制全屏的設(shè)置（UC全屏），webapp模式等
正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）
往期好文推薦：
webpack打包（有面試題）
純css實現(xiàn)瀑布流（multi-column多列及flex布局）
畫三角形
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98036.html
摘要：解決方案可以解決在手機上點擊事件的延遲的模塊，事件也是為了解決在的延遲問題顯示屏原理及設(shè)計方案說明屏是一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由個變?yōu)槎鄠€，如在同樣帶下的屏幕上，蘋果設(shè)備的顯示屏中，像素點個變?yōu)閭€。 原文鏈接 - https://github.com/FrontEndRo... H5項目常見問題及注意事項 Meta基礎(chǔ)知識： H5頁面窗口自動調(diào)整到設(shè)備...
摘要：解決方案可以解決在手機上點擊事件的延遲的模塊，事件也是為了解決在的延遲問題顯示屏原理及設(shè)計方案說明屏是一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由個變?yōu)槎鄠€，如在同樣帶下的屏幕上，蘋果設(shè)備的顯示屏中，像素點個變?yōu)閭€。 Meta基礎(chǔ)知識： H5頁面窗口自動調(diào)整到設(shè)備寬度，并禁止用戶縮放頁面 //一、HTML頁面結(jié)構(gòu) // width 設(shè)置viewport寬度，為一...
摘要：解決方案可以解決在手機上點擊事件的延遲的模塊，事件也是為了解決在的延遲問題顯示屏原理及設(shè)計方案說明屏是一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由個變?yōu)槎鄠€，如在同樣帶下的屏幕上，蘋果設(shè)備的顯示屏中，像素點個變?yōu)閭€。 Meta基礎(chǔ)知識： H5頁面窗口自動調(diào)整到設(shè)備寬度，并禁止用戶縮放頁面 //一、HTML頁面結(jié)構(gòu) // width 設(shè)置viewport寬度，為一...
閱讀 2042·2023-04-26 01:33
閱讀 1669·2023-04-26 00:52
閱讀 1052·2021-11-18 13:14
閱讀 5466·2021-09-26 10:18
閱讀 2919·2021-09-22 15:52
閱讀 1498·2019-08-29 17:15
閱讀 3028·2019-08-29 16:11
閱讀 1046·2019-08-29 16:11
