Preface
When we are doing mobile terminals, when we are compatible with cross-platform, browser, and mobile devices, we need to make specific adjustments based on the device and browser. We remember to judge the browser type and check some information. We will summarize it here
Another is the scaling problem of mobile terminals. It is set in the meta tag to impose mandatory restrictions on some browsers.
Some common attributes of
Navigator is a property of the window object, pointing to an object containing browser-related information.
Browser version number
Languages used by the browser
Browser userAgent information
where the userAgent attribute is a read-only string that declares the value of the user agent header used by the browser for HTTP requests.
2. The more common judgments of the iOS, Android and PC
Simpler
/* Determine browser type */
let userAgent = ;
/* Judge mobile phone model */
let app = ;
/* Android terminal */
let isAndroid = ('Android');
/* ios terminal */
let isMac = !!(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
Encapsulated
/* Methods for determining various types */
const browser = {
version: function() {
const userAgent = ;
return {
/* Determine whether it is ios */
ios: !!(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
/* Determine whether it is Android */
android: ('Android') > -1 || ('Adr') > -1,
/* Determine whether it is a mobile terminal */
mobilePhone: !!(/AppleWebKit.*Mobile.*/),
/* IE kernel */
trident: ('Trident') > -1,
/* opera kernel */
presto: ('Presto') > -1,
/* Apple, Google kernel */
webkit: ('AppleWebKit') > -1,
/* Firefox kernel */
gecko: ('Gecko') > -1 && ('KHTML') == -1,
/* Determine whether it is an IPhone or QQHD browser */
iphone: ('iPhone') > -1,
/* Determine whether it is an iPad */
iPad: ('iPad') > -1,
/* Determine whether it is a web application (a website that allows users to complete certain tasks), without a header and bottom */
webApp: ('Safari'),
/* Is it WeChat */
weixin: ('MicroMessenger'),
/* QQ */
QQ: (/\sQQ/i) == ' qq',
}
}(),
/* Determine the language used by the browser: the language used by the browser except IE browser,
* Languages used by the browser
*/
browserLanguage: ( || ).toLowerCase()
};
if( || || ) {
('It's a mobile terminal');
}
Tag settings
For example, if the browser is forced to set full screen (UC full screen), webapp mode, etc.
<meta charset="UTF-8"> <!-- View window，Mobile-specific tags --> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"> <!-- avoidIEUse Compatibility Mode --> <meta http-equiv="x-ua-compatible" content="IE=edge"> <!-- ucForced vertical screen --> <meta name="screen-orientation" content="portrait"> <!-- QQForced vertical screen --> <meta name="x5-orientation" content="portrait"> <!-- UCForce full screen --> <meta name="full-screen" content="yes"> <!-- QQForce full screen --> <meta name="x5-fullscreen" content="true"> <!-- UCApplication mode --> <meta name="browsermode" content="application"> <!-- QQApplication mode --> <meta name="x5-page-mode" content="app"> <!-- Whether to startwebappFunction，The default Apple toolbar and menu bar will be deleted --> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- This is mainly set based on the actual page design's main color matching --> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- Ignore the number on the page to be identified as a phone number,emailIdentification --> <meta name="format-decoration" content="telephone=no,email=no"> <!-- Enable360Browser's Speed Mode(webkit) --> <meta name="renderer" content="webkit"> <!-- Optimized for handheld devices，主要是针对一些老的不IdentificationviewportBrowser，Like Blackberry --> <meta name="HandheldFriendly" content="true"> <!-- Microsoft's old browser --> <meta name="MobileOptimized" content="320"> <!-- windows phone Click without highlights --> <meta name="msapplication-tap-highlight" content="no">
Summarize
The above is the entire content of this article. I hope that the content of this article has certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.