frankwang0909.github.io/useragent.html at master · frankwang0909/frankwang0909.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><title>Useragent - Frank Wang's Coding World</title><meta name=renderer content="webkit"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1"><meta http-equiv=Cache-Control content="no-transform"><meta http-equiv=Cache-Control content="no-siteapp"><meta name=theme-color content="#f8f5ec"><meta name=msapplication-navbutton-color content="#f8f5ec"><meta name=apple-mobile-web-app-capable content="yes"><meta name=apple-mobile-web-app-status-bar-style content="#f8f5ec"><meta name=author content><meta name=description content="Identify mobile devices through navigator.userAgent and jump to mobile sites. The wonderful use of userAgent. The purpose of userAgent: identify mobile phones and tablet devices; the specific meaning of the string returned by userAgent"><meta name=keywords content="userAgent,mobile device,Purpose of userAgent"><meta name=generator content="Hugo 0.157.0 with theme even"><link rel=canonical href=http://frankwang0909.github.io/useragent.html><link rel=apple-touch-icon sizes=180x180 href=/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/favicon-16x16.png><link rel=manifest href=/manifest.json><link rel=mask-icon href=/safari-pinned-tab.svg color=#5bbad5><link href=/sass/main.min.af7fd1da18d66c2b017df5b4cae508ef44cfcac3fb4c7c7a327fe4f4f9e28b08.css rel=stylesheet><link href=/lib/fancybox/jquery.fancybox-3.1.20.min.css rel=stylesheet><meta property="og:url" content="http://frankwang0909.github.io/useragent.html"><meta property="og:site_name" content="Frank Wang's Coding World"><meta property="og:title" content="Useragent"><meta property="og:description" content="Identify mobile devices through navigator.userAgent and jump to mobile sites. The wonderful use of userAgent. The purpose of userAgent: identify mobile phones and tablet devices; the specific meaning of the string returned by userAgent"><meta property="og:locale" content="en_US"><meta property="og:type" content="article"><meta property="article:section" content="post"><meta property="article:published_time" content="2017-04-04T21:02:50+08:00"><meta property="article:modified_time" content="2017-04-04T21:02:50+08:00"><meta property="article:tag" content="UserAgent"><meta itemprop=name content="Useragent"><meta itemprop=description content="Identify mobile devices through navigator.userAgent and jump to mobile sites. The wonderful use of userAgent. The purpose of userAgent: identify mobile phones and tablet devices; the specific meaning of the string returned by userAgent"><meta itemprop=datePublished content="2017-04-04T21:02:50+08:00"><meta itemprop=dateModified content="2017-04-04T21:02:50+08:00"><meta itemprop=wordCount content="609"><meta itemprop=keywords content="userAgent,mobile device,Purpose of userAgent"><meta name=twitter:card content="summary"><meta name=twitter:title content="Useragent"><meta name=twitter:description content="Identify mobile devices through navigator.userAgent and jump to mobile sites. The wonderful use of userAgent. The purpose of userAgent: identify mobile phones and tablet devices; the specific meaning of the string returned by userAgent"><!--[if lte IE 9]><script src=https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js></script><![endif]--><!--[if lt IE 9]><script src=https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js></script><script src=https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js></script><![endif]--></head><body><div id=mobile-navbar class=mobile-navbar><div class=mobile-header-logo><a href=/en/ class=logo>Frank Wang’s Coding World</a></div><div class=mobile-navbar-icon><span></span>
<span></span>
<span></span></div></div><nav id=mobile-menu class="mobile-menu slideout-menu"><ul class=mobile-menu-list><a href=/en/><li class=mobile-menu-item>Home</li></a><a href=/en/post/><li class=mobile-menu-item>Archives</li></a><a href=/en/tags/><li class=mobile-menu-item>Tags</li></a><a href=/en/categories/><li class=mobile-menu-item>Categories</li></a><a href=/><li class=mobile-menu-item>中文</li></a></ul></nav><div class=container id=mobile-panel><header id=header class=header><div class=logo-wrapper><a href=/en/ class=logo>Frank Wang’s Coding World</a></div><nav class=site-navbar><ul id=menu class=menu><li class=menu-item><a class=menu-item-link href=/en/>Home</a></li><li class=menu-item><a class=menu-item-link href=/en/post/>Archives</a></li><li class=menu-item><a class=menu-item-link href=/en/tags/>Tags</a></li><li class=menu-item><a class=menu-item-link href=/en/categories/>Categories</a></li><li class=menu-item><a class=menu-item-link href=/>中文</a></li></ul></nav></header><main id=main class=main><div class=content-wrapper><div id=content class=content><article class=post><header class=post-header><h1 class=post-title>Useragent</h1><div class=post-meta><span class=post-time>2017-04-04</span><div class=post-category><a href=/en/categories/frontend/>frontend</a></div><span class=more-meta>609 words </span><span class=more-meta>3 mins read</span></div></header><div class=post-toc id=post-toc><h2 class=post-toc-title>Contents</h2><div class="post-toc-content always-active"><nav id=TableOfContents><ul><li><a href=#navigatoruseragent>navigator.userAgent</a></li></ul></nav></div></div><div class=post-content><p>The websites of many Internet companies are divided into PC and mobile terminals. If a user uses a mobile phone to access a PC site, the web page may be loaded slowly due to the limitations of the mobile phone network.
Therefore, how to identify the device used by users to access the website and automatically jump to the corresponding site?</p><h2 id=navigatoruseragent>navigator.userAgent</h2><p>Navigator is an independent object in JavaScript, used to provide information such as the browser and operating system used by the user, in the form of navigator object attributes. This object is supported by all browsers.</p><p>The navigator object has a userAgent attribute that returns information about the user&rsquo;s device operating system and browser.</p><ol><li>Use <code>Google Chrome</code> to open a web page, <code>F12</code> to open the Chrome debugging tool, enter <code>navigator.userAgent</code>, the following string will be returned:</li></ol><p>&ldquo;Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.98 Safari/537.36&rdquo;</p><p>This string can be divided into four main parts. Let me explain the meaning of each part:</p><ol><li>Mozilla/5.0: Indicates compatibility with Mozilla, almost all browsers have this character;
2) (Windows NT 6.1; Win64; x64): Indicates the operating system version of the device and CPU information;
3) AppleWebKit/537.36 (KHTML, like Gecko): represents the browser’s core;
4) Chrome/57.0.2987.98 Safari/537.36: Indicates the browser version number.</li></ol><ol start=2><li>Use <code>Firefox</code> to open a web page, <code>F12</code> to open the debugging tool, and similarly enter <code>navigator.userAgent</code> in the console to return the following string:</li></ol><p>&ldquo;Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:52.0) Gecko/20100101 Firefox/52.0&rdquo;</p><p>Differences from previous results:</p><ol><li>The browser kernel is Gecko kernel,
2) The browser version is Firefox/52.0. From here we can see that Firefox is based on the Gecko kernel.</li></ol><ol start=3><li>Use <code>Google Chrome</code> to simulate <code>mobile phone</code> access, select <code>iPhone6s</code>, and also enter <code>navigator.userAgent</code> in the debugging tool console, the following string will be returned:</li></ol><p>&ldquo;Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1&rdquo;</p><p>Notice that <code>iPhone</code> appears.</p><ol start=4><li>Use <code>Google Chrome</code> to simulate <code>tablet device</code> access, select <code>iPad</code>, and also enter <code>navigator.userAgent</code> in the debugging tool console, the following string will be returned:</li></ol><p>&ldquo;Mozilla/5.0 (iPad; CPU OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1&rdquo;</p><p>Notice that <code>iPad</code> appears.</p><ol start=5><li>Use <code>Google Chrome</code> to simulate an <code>Android device</code>, for example, select <code>Galaxy S5</code>, and also enter <code>navigator.userAgent</code> in the debugging tool console, the following string will be returned:</li></ol><p>&ldquo;Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.98 Mobile Safari/537.36&rdquo;</p><p>Notice that <code>Android</code> appears.</p><ol start=6><li>Use <code>Google Chrome</code> to simulate <code>winPhone device</code>, for example, select <code>Microsoft Lumia 950</code>, and also enter <code>navigator.userAgent</code> in the debugging tool console, the following string will be returned:</li></ol><p>&ldquo;Mozilla/5.0 (Windows Phone 10.0; Android 4.2.1; Microsoft; Lumia 950) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Mobile Safari/537.36 Edge/14.14263&rdquo;</p><p>Notice that <code>Windows Phone</code> appears.</p><p>Through the above small test, we can also find a rule: when accessed by mobile phones and tablet devices, the string returned by <code>navigator.userAgent</code> will contain <code>Mobile</code>.</p><p>##Use of userAgent: Identify mobile phones and tablet devices</p><p>We have just seen that when accessed by mobile phones and tablet devices, the string returned by <code>navigator.userAgent</code> will contain <code>Mobile</code>. This can be used to achieve the requirements raised at the beginning of the article, automatically identify the user&rsquo;s access device and jump to the corresponding site.</p><p>The PC site can add the following code to automatically jump to the mobile site</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span>    <span style=color:#66d9ef>var</span> <span style=color:#a6e22e>ua</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>navigator</span>.<span style=color:#a6e22e>userAgent</span>.<span style=color:#a6e22e>toLowerCase</span>();
</span></span><span style=display:flex><span>    <span style=color:#66d9ef>if</span> (<span style=color:#e6db74>/mobile|android|iphone|ipad|phone/i</span>.<span style=color:#a6e22e>test</span>(<span style=color:#a6e22e>ua</span>)) {
</span></span><span style=display:flex><span>       window.<span style=color:#a6e22e>location</span>.<span style=color:#a6e22e>href</span> <span style=color:#f92672>=</span> <span style=color:#e6db74>&#34;http://m.example.com&#34;</span>;
</span></span><span style=display:flex><span>    }
</span></span></code></pre></div><p>If the webpage opened in <code>WeChat</code> and the webpage opened in <code>mobile browser</code> execute different scripts, you can also use <code>userAgent</code> to determine whether it was opened in <code>WeChat</code>.</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none><code class=language-javascript data-lang=javascript><span style=display:flex><span>	<span style=color:#66d9ef>var</span> <span style=color:#a6e22e>ua</span> <span style=color:#f92672>=</span> <span style=color:#a6e22e>navigator</span>.<span style=color:#a6e22e>userAgent</span>.<span style=color:#a6e22e>toLowerCase</span>();
</span></span><span style=display:flex><span>	<span style=color:#66d9ef>if</span>(<span style=color:#e6db74>/micromessenger/i</span>.<span style=color:#a6e22e>test</span>(<span style=color:#a6e22e>ua</span>){
</span></span><span style=display:flex><span>		<span style=color:#75715e>//to do
</span></span></span><span style=display:flex><span>	}
</span></span></code></pre></div></div><footer class=post-footer><div class=post-tags><a href=/en/tags/useragent/>userAgent</a></div><nav class=post-nav><a class=prev href=/copy2clipboard.html><i class="iconfont icon-left"></i>
<span class="prev-text nav-default">Copy2clipboard</span>
<span class="prev-text nav-mobile">Prev</span>
</a><a class=next href=/anywhere-npm.html><span class="next-text nav-default">Anywhere</span>
<span class="next-text nav-mobile">Next</span>
<i class="iconfont icon-right"></i></a></nav></footer></article></div></div></main><footer id=footer class=footer><div class=social-links><a href=mailto:frankwang0909@gmail.com class="iconfont icon-email" title=email></a><a href=https://www.twitter.com/frankwang0909 class="iconfont icon-twitter" title=twitter></a><a href=https://www.github.com/frankwang0909 class="iconfont icon-github" title=github></a><a href=http://frankwang0909.github.io/en/index.xml type=application/rss+xml class="iconfont icon-rss" title=rss></a></div><div class=copyright><span class=power-by>Powered by <a class=hexo-link href=https://gohugo.io>Hugo</a>
</span><span class=division>|</span>
<span class=theme-info>Theme -
<a class=theme-link href=https://github.com/olOwOlo/hugo-theme-even>Even</a>
</span><span class=copyright-year>&copy;
2016 -
2026<span class=heart><i class="iconfont icon-heart"></i></span><span></span></span></div></footer><div class=back-to-top id=back-to-top><i class="iconfont icon-up"></i></div></div><script type=text/javascript src=/lib/jquery/jquery-3.2.1.min.js></script><script type=text/javascript src=/lib/slideout/slideout-1.0.1.min.js></script><script type=text/javascript src=/lib/fancybox/jquery.fancybox-3.1.20.min.js></script><script type=text/javascript src=/js/main.min.4ae89da218555efa0e7093a20b92017d2e1202b66fff9fc2edf4cb8d44b44c6e.js></script><script type=text/javascript>window.MathJax={tex:{}}</script><script async src=https://cdn.jsdelivr.net/npm/mathjax@3.0.5/es5/tex-mml-chtml.js integrity="sha256-HGLuEfFcsUJGhvB8cQ8nr0gai9EucOOaIxFw7qxmd+w=" crossorigin=anonymous></script></body></html>