{"id":16,"date":"2024-08-22T10:25:11","date_gmt":"2024-08-22T02:25:11","guid":{"rendered":"http:\/\/8.147.235.132:3838\/?p=16"},"modified":"2024-08-22T10:25:47","modified_gmt":"2024-08-22T02:25:47","slug":"javascript-%e4%be%a6%e6%b5%8b%e6%89%8b%e6%9c%ba%e6%b5%8f%e8%a7%88%e5%99%a8%e7%9a%84%e4%ba%94%e7%a7%8d%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/www.jpxiao.cn\/index.php\/2024\/08\/22\/javascript-%e4%be%a6%e6%b5%8b%e6%89%8b%e6%9c%ba%e6%b5%8f%e8%a7%88%e5%99%a8%e7%9a%84%e4%ba%94%e7%a7%8d%e6%96%b9%e6%b3%95\/","title":{"rendered":"JavaScript \u4fa6\u6d4b\u624b\u673a\u6d4f\u89c8\u5668\u7684\u4e94\u79cd\u65b9\u6cd5"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u6709\u65f6\u5019\uff0c\u524d\u7aef\u7f51\u9875\u9700\u8981\u77e5\u9053\uff0c\u7528\u6237\u4f7f\u7528\u7684\u662f\u624b\u673a\u6d4f\u89c8\u5668\u8fd8\u662f\u684c\u9762\u6d4f\u89c8\u5668\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u672c\u6587\u6839\u636e&nbsp;<a href=\"https:\/\/stackoverflow.com\/questions\/11381673\/detecting-a-mobile-browser\" target=\"_blank\" rel=\"noreferrer noopener\">StackOverflow<\/a>\uff0c\u6574\u7406\u4e86 JavaScript \u4fa6\u6d4b\u624b\u673a\u6d4f\u89c8\u5668\u7684\u4e94\u79cd\u65b9\u6cd5\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn.beekka.com\/blogimg\/asset\/202109\/bg2021092717.jpg\" alt=\"\" title=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e00\u3001navigator.userAgent<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6700\u7b80\u5355\u7684\u65b9\u6cd5\u5c31\u662f\u5206\u6790\u6d4f\u89c8\u5668\u7684 user agent \u5b57\u7b26\u4e32\uff0c\u5b83\u5305\u542b\u4e86\u8bbe\u5907\u4fe1\u606f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JS \u901a\u8fc7<code>navigator.userAgent<\/code>\u5c5e\u6027\u62ff\u5230\u8fd9\u4e2a\u5b57\u7b26\u4e32\uff0c\u53ea\u8981\u91cc\u9762\u5305\u542b<code>mobi<\/code>\u3001<code>android<\/code>\u3001<code>iphone<\/code>\u7b49\u5173\u952e\u5b57\uff0c\u5c31\u53ef\u4ee5\u8ba4\u5b9a\u662f\u79fb\u52a8\u8bbe\u5907\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nif (\/Mobi|Android|iPhone\/i.test(navigator.userAgent)) {\n  \/\/ \u5f53\u524d\u8bbe\u5907\u662f\u79fb\u52a8\u8bbe\u5907\n}\n\n\/\/ \u53e6\u4e00\u79cd\u5199\u6cd5\nif (\n  navigator.userAgent.match(\/Mobi\/i) ||\n  navigator.userAgent.match(\/Android\/i) ||\n  navigator.userAgent.match(\/iPhone\/i)\n) {\n  \/\/ \u5f53\u524d\u8bbe\u5907\u662f\u79fb\u52a8\u8bbe\u5907\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd9\u79cd\u65b9\u6cd5\u7684\u4f18\u70b9\u662f\u7b80\u5355\u65b9\u4fbf\uff0c\u7f3a\u70b9\u662f\u4e0d\u53ef\u9760\uff0c\u56e0\u4e3a\u7528\u6237\u53ef\u4ee5\u4fee\u6539\u8fd9\u4e2a\u5b57\u7b26\u4e32\uff0c\u8ba9\u624b\u673a\u6d4f\u89c8\u5668\u4f2a\u88c5\u6210\u684c\u9762\u6d4f\u89c8\u5668\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Chromium \u7cfb\u7684\u6d4f\u89c8\u5668\uff0c\u8fd8\u6709\u4e00\u4e2a<code>navigator.userAgentData<\/code>\u5c5e\u6027\uff0c\u4e5f\u662f\u7c7b\u4f3c\u7684\u4f5c\u7528\u3002\u4e0d\u540c\u4e4b\u5904\u662f\u5b83\u5c06 user agent \u5b57\u7b26\u4e32\u89e3\u6790\u4e3a\u4e00\u4e2a\u5bf9\u8c61\uff0c\u8be5\u5bf9\u8c61\u7684<code>mobile<\/code>\u5c5e\u6027\uff0c\u8fd4\u56de\u4e00\u4e2a\u5e03\u5c14\u503c\uff0c\u8868\u793a\u7528\u6237\u662f\u5426\u4f7f\u7528\u79fb\u52a8\u8bbe\u5907\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nconst isMobile = navigator.userAgentData.mobile; \n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u6ce8\u610f\uff0c\u82f9\u679c\u7684 Safari \u6d4f\u89c8\u5668\u548c Firefox \u6d4f\u89c8\u5668\u90fd\u4e0d\u652f\u6301\u8fd9\u4e2a\u5c5e\u6027\uff0c\u5177\u4f53\u60c5\u51b5\u53ef\u4ee5\u67e5\u770b&nbsp;<a href=\"https:\/\/caniuse.com\/mdn-api_navigator_useragentdata\" target=\"_blank\" rel=\"noreferrer noopener\">Caniuse \u7f51\u7ad9<\/a>\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6b64\u5916\uff0c\u8fd8\u6709\u4e00\u4e2a\u5df2\u7ecf\u5e9f\u9664\u7684<a href=\"https:\/\/stackoverflow.com\/questions\/19877924\/what-is-the-list-of-possible-values-for-navigator-platform-as-of-today\" target=\"_blank\" rel=\"noreferrer noopener\"><code>navigator.platform<\/code>\u5c5e\u6027<\/a>\uff0c\u6240\u6709\u6d4f\u89c8\u5668\u90fd\u652f\u6301\uff0c\u6240\u4ee5\u4e5f\u53ef\u4ee5\u7528\u3002\u5b83\u8fd4\u56de\u4e00\u4e2a\u5b57\u7b26\u4e32\uff0c\u8868\u793a\u7528\u6237\u7684\u64cd\u4f5c\u7cfb\u7edf\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nif (\/Android|iPhone|iPad|iPod\/i.test(navigator.platform)) {\n  \/\/ \u5f53\u524d\u8bbe\u5907\u662f\u79fb\u52a8\u8bbe\u5907\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e8c\u3001window.screen\uff0cwindow.innerWidth<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u53e6\u4e00\u79cd\u65b9\u6cd5\u662f\u901a\u8fc7\u5c4f\u5e55\u5bbd\u5ea6\uff0c\u5224\u65ad\u662f\u5426\u4e3a\u624b\u673a\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>window.screen<\/code>\u5bf9\u8c61\u8fd4\u56de\u7528\u6237\u8bbe\u5907\u7684\u5c4f\u5e55\u4fe1\u606f\uff0c\u8be5\u5bf9\u8c61\u7684<code>width<\/code>\u5c5e\u6027\u662f\u5c4f\u5e55\u5bbd\u5ea6\uff08\u5355\u4f4d\u4e3a\u50cf\u7d20\uff09\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nif (window.screen.width &lt; 500) {\n  \/\/ \u5f53\u524d\u8bbe\u5907\u662f\u79fb\u52a8\u8bbe\u5907 \n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e0a\u9762\u793a\u4f8b\u4e2d\uff0c\u5982\u679c\u5c4f\u5e55\u5bbd\u5ea6<code>window.screen.width<\/code>\u5c0f\u4e8e500\u50cf\u7d20\uff0c\u5c31\u8ba4\u4e3a\u662f\u624b\u673a\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd9\u4e2a\u65b9\u6cd5\u7684\u7f3a\u70b9\u5728\u4e8e\uff0c\u5982\u679c\u624b\u673a\u6a2a\u5c4f\u4f7f\u7528\uff0c\u5c31\u8bc6\u522b\u4e0d\u4e86\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u53e6\u4e00\u4e2a\u5c5e\u6027<code>window.innerWidth<\/code>\u8fd4\u56de\u6d4f\u89c8\u5668\u7a97\u53e3\u91cc\u9762\u7684\u7f51\u9875\u53ef\u89c1\u90e8\u5206\u7684\u5bbd\u5ea6\uff0c\u6bd4\u8f83\u9002\u5408\u6307\u5b9a\u7f51\u9875\u5728\u4e0d\u540c\u5bbd\u5ea6\u4e0b\u7684\u6837\u5f0f\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nconst getBrowserWidth = function() {\n  if (window.innerWidth &lt; 768) {\n    return \"xs\";\n  } else if (window.innerWidth &lt; 991) {\n    return \"sm\";\n  } else if (window.innerWidth &lt; 1199) {\n    return \"md\";\n  } else {\n    return \"lg\";\n  }\n};\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e09\u3001window.orientation<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u7b2c\u4e09\u79cd\u65b9\u6cd5\u662f\u4fa6\u6d4b\u5c4f\u5e55\u65b9\u5411\uff0c\u624b\u673a\u5c4f\u5e55\u53ef\u4ee5\u968f\u65f6\u6539\u53d8\u65b9\u5411\uff08\u6a2a\u5c4f\u6216\u7ad6\u5c4f\uff09\uff0c\u684c\u9762\u8bbe\u5907\u505a\u4e0d\u5230\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>window.orientation<\/code>\u5c5e\u6027\u7528\u4e8e\u83b7\u53d6\u5c4f\u5e55\u7684\u5f53\u524d\u65b9\u5411\uff0c\u53ea\u6709\u79fb\u52a8\u8bbe\u5907\u624d\u6709\u8fd9\u4e2a\u5c5e\u6027\uff0c\u684c\u9762\u8bbe\u5907\u4f1a\u8fd4\u56de<code>undefined<\/code>\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nif (typeof window.orientation !== 'undefined') {\n  \/\/ \u5f53\u524d\u8bbe\u5907\u662f\u79fb\u52a8\u8bbe\u5907 \n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u6ce8\u610f\uff0ciPhone \u7684 Safari \u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u8be5\u5c5e\u6027\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u56db\u3001touch \u4e8b\u4ef6<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u7b2c\u56db\u79cd\u65b9\u6cd5\u662f\uff0c\u624b\u673a\u6d4f\u89c8\u5668\u7684 DOM \u5143\u7d20\u53ef\u4ee5\u901a\u8fc7<code>ontouchstart<\/code>\u5c5e\u6027\uff0c\u4e3a<code>touch<\/code>\u4e8b\u4ef6\u6307\u5b9a\u76d1\u542c\u51fd\u6570\u3002\u684c\u9762\u8bbe\u5907\u6ca1\u6709\u8fd9\u4e2a\u5c5e\u6027\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nfunction isMobile() { \n  return ('ontouchstart' in document.documentElement); \n}\n\n\/\/ \u53e6\u4e00\u79cd\u5199\u6cd5\nfunction isMobile() {\n  try {\n    document.createEvent(\"TouchEvent\"); return true;\n  } catch(e) {\n    return false; \n  }\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e94\u3001window.matchMedia()<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6700\u540e\u4e00\u79cd\u65b9\u6cd5\u662f\u7ed3\u5408 CSS \u6765\u5224\u65ad\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CSS \u901a\u8fc7 media query\uff08\u5a92\u4ecb\u67e5\u8be2\uff09\u4e3a\u7f51\u9875\u6307\u5b9a\u54cd\u5e94\u5f0f\u6837\u5f0f\u3002\u5982\u679c\u67d0\u4e2a\u9488\u5bf9\u624b\u673a\u7684 media query \u8bed\u53e5\u751f\u6548\u4e86\uff0c\u5c31\u53ef\u4ee5\u8ba4\u4e3a\u5f53\u524d\u8bbe\u5907\u662f\u79fb\u52a8\u8bbe\u5907\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>window.matchMedia()<\/code>\u65b9\u6cd5\u63a5\u53d7\u4e00\u4e2a CSS \u7684 media query \u8bed\u53e5\u4f5c\u4e3a\u53c2\u6570\uff0c\u5224\u65ad\u8fd9\u4e2a\u8bed\u53e5\u662f\u5426\u751f\u6548\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nlet isMobile = window.matchMedia(\"only screen and (max-width: 760px)\").matches;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e0a\u9762\u793a\u4f8b\u4e2d\uff0c<code>window.matchMedia()<\/code>\u7684\u53c2\u6570\u662f\u4e00\u4e2a CSS \u67e5\u8be2\u8bed\u53e5\uff0c\u8868\u793a\u53ea\u5bf9\u5c4f\u5e55\u5bbd\u5ea6\u4e0d\u8d85\u8fc7 700 \u50cf\u7d20\u7684\u8bbe\u5907\u751f\u6548\u3002\u5b83\u8fd4\u56de\u4e00\u4e2a\u5bf9\u8c61\uff0c\u8be5\u5bf9\u8c61\u7684<code>matches<\/code>\u5c5e\u6027\u662f\u4e00\u4e2a\u5e03\u5c14\u503c\u3002\u5982\u679c\u662f<code>true<\/code>\uff0c\u5c31\u8868\u793a\u67e5\u8be2\u751f\u6548\uff0c\u5f53\u524d\u8bbe\u5907\u662f\u624b\u673a\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u9664\u4e86\u901a\u8fc7\u5c4f\u5e55\u5bbd\u5ea6\u5224\u65ad\uff0c\u8fd8\u53ef\u4ee5\u901a\u8fc7\u6307\u9488\u7684\u7cbe\u786e\u6027\u5224\u65ad\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nlet isMobile = window.matchMedia(\"(pointer:coarse)\").matches;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e0a\u9762\u793a\u4f8b\u4e2d\uff0cCSS \u8bed\u53e5<code>pointer:coarse<\/code>\u8868\u793a\u5f53\u524d\u8bbe\u5907\u7684\u6307\u9488\u662f\u4e0d\u7cbe\u786e\u7684\u3002\u7531\u4e8e\u624b\u673a\u4e0d\u652f\u6301\u9f20\u6807\uff0c\u53ea\u652f\u6301\u89e6\u6478\uff0c\u6240\u4ee5\u7b26\u5408\u8fd9\u4e2a\u6761\u4ef6\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6709\u4e9b\u8bbe\u5907\u652f\u6301\u591a\u79cd\u6307\u9488\uff0c\u6bd4\u5982\u540c\u65f6\u652f\u6301\u9f20\u6807\u548c\u89e6\u6478\u3002<code>pointer:coarse<\/code>\u53ea\u7528\u6765\u5224\u65ad\u4e3b\u6307\u9488\uff0c\u6b64\u5916\u8fd8\u6709\u4e00\u4e2a<code>any-pointer<\/code>\u547d\u4ee4\u5224\u65ad\u6240\u6709\u6307\u9488\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nlet isMobile = window.matchMedia(\"(any-pointer:coarse)\").matches;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e0a\u9762\u793a\u4f8b\u4e2d\uff0c<code>any-pointer:coarse<\/code>\u8868\u793a\u6240\u6709\u6307\u9488\u91cc\u9762\uff0c\u53ea\u8981\u6709\u4e00\u4e2a\u6307\u9488\u662f\u4e0d\u7cbe\u786e\u7684\uff0c\u5c31\u7b26\u5408\u67e5\u8be2\u6761\u4ef6\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u516d\u3001\u5de5\u5177\u5305<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u9664\u4e86\u4e0a\u9762\u8fd9\u4e9b\u65b9\u6cd5\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528\u522b\u4eba\u5199\u597d\u7684\u5de5\u5177\u5305\u3002\u8fd9\u91cc\u63a8\u8350&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/react-device-detect\" target=\"_blank\" rel=\"noreferrer noopener\">react-device-detect<\/a>\uff0c\u5b83\u652f\u6301\u591a\u79cd\u7c92\u5ea6\u7684\u8bbe\u5907\u4fa6\u6d4b\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nimport {isMobile} from 'react-device-detect';\n\nif (isMobile) {\n  \/\/ \u5f53\u524d\u8bbe\u5907\u662f\u79fb\u52a8\u8bbe\u5907\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uff08\u5b8c\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6709\u65f6\u5019\uff0c\u524d\u7aef\u7f51\u9875\u9700\u8981\u77e5\u9053\uff0c\u7528\u6237\u4f7f\u7528\u7684\u662f\u624b\u673a\u6d4f\u89c8\u5668\u8fd8\u662f\u684c\u9762\u6d4f\u89c8\u5668\u3002 \u672c\u6587\u6839\u636e&nbsp;StackOverflo [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-16","post","type-post","status-publish","format-standard","hentry","category-js"],"_links":{"self":[{"href":"https:\/\/www.jpxiao.cn\/index.php\/wp-json\/wp\/v2\/posts\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jpxiao.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jpxiao.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jpxiao.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jpxiao.cn\/index.php\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":1,"href":"https:\/\/www.jpxiao.cn\/index.php\/wp-json\/wp\/v2\/posts\/16\/revisions"}],"predecessor-version":[{"id":17,"href":"https:\/\/www.jpxiao.cn\/index.php\/wp-json\/wp\/v2\/posts\/16\/revisions\/17"}],"wp:attachment":[{"href":"https:\/\/www.jpxiao.cn\/index.php\/wp-json\/wp\/v2\/media?parent=16"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jpxiao.cn\/index.php\/wp-json\/wp\/v2\/categories?post=16"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jpxiao.cn\/index.php\/wp-json\/wp\/v2\/tags?post=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}