javascript - 使用JavaScript检测客户端系统是笔记本电脑还是台式机

我想在我的网页(如果它是笔记本电脑)中的小部件中显示客户端系统的电池状态和时钟。
如果是台式机，我不想显示电池状态。
时钟小部件运行正常。

我也可以通过使用navigator.getBattery()来获取电池详细信息。
但是，如果它是 table 面，则我不想显示该小部件。

因此，如何检测使用JavaScript的客户端是台式机还是笔记本电脑？

以下是navigator的内容，但是它没有用于检测它是笔记本电脑还是台式机的详细信息。

console.log(navigator);

{
  "vendorSub": "",
  "productSub": "20030107",
  "vendor": "Google Inc.",
  "maxTouchPoints": 0,
  "hardwareConcurrency": 4,
  "appCodeName": "Mozilla",
  "appName": "Netscape",
  "appVersion": "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36",
  "platform": "Win32",
  "product": "Gecko",
  "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36",
  "language": "en-GB",
  "languages": [
    "en-US",
    "en"
  ],
  "onLine": true,
  "cookieEnabled": true,
  "doNotTrack": null,
  "geolocation": {
    "getCurrentPosition": function getCurrentPosition() { [native code] },
    "watchPosition": function watchPosition() { [native code] },
    "clearWatch": function clearWatch() { [native code] }
  },
  "mediaDevices": {
    "enumerateDevices": function enumerateDevices() { [native code] },
    "getSupportedConstraints": function getSupportedConstraints() { [native code] },
    "getUserMedia": function getUserMedia() { [native code] },
    "addEventListener": function addEventListener() { [native code] },
    "removeEventListener": function removeEventListener() { [native code] },
    "dispatchEvent": function dispatchEvent() { [native code] }
  },
  "plugins": {
    "0": [object Plugin],
    "1": [object Plugin],
    "2": [object Plugin],
    "3": [object Plugin],
    "4": [object Plugin],
    "length": 5,
    "item": function item() { [native code] },
    "namedItem": function namedItem() { [native code] },
    "refresh": function refresh() { [native code] }
  },
  "mimeTypes": {
    "0": [object MimeType],
    "1": [object MimeType],
    "2": [object MimeType],
    "3": [object MimeType],
    "4": [object MimeType],
    "5": [object MimeType],
    "6": [object MimeType],
    "length": 7,
    "item": function item() { [native code] },
    "namedItem": function namedItem() { [native code] }
  },
  "webkitTemporaryStorage": {
    "queryUsageAndQuota": /**id:16**/ function queryUsageAndQuota() { [native code] },
    "requestQuota": /**id:17**/ function requestQuota() { [native code] }
  },
  "webkitPersistentStorage": {
    "queryUsageAndQuota": /**ref:16**/,
    "requestQuota": /**ref:17**/
  },
  "serviceWorker": /**error accessing property**/,
  "getBattery": function getBattery() { [native code] },
  "sendBeacon": function sendBeacon() { [native code] },
  "requestMediaKeySystemAccess": function requestMediaKeySystemAccess() { [native code] },
  "getGamepads": function getGamepads() { [native code] },
  "webkitGetUserMedia": function webkitGetUserMedia() { [native code] },
  "javaEnabled": function javaEnabled() { [native code] },
  "vibrate": function vibrate() { [native code] },
  "requestMIDIAccess": function requestMIDIAccess() { [native code] },
  "credentials": {
    "get": function get() { [native code] },
    "store": function store() { [native code] },
    "requireUserMediation": function requireUserMediation() { [native code] }
  },
  "storage": {
    "persisted": function persisted() { [native code] },
    "persist": function () { [native code] }
  },
  "permissions": {
    "query": function query() { [native code] }
  },
  "presentation": {
    "defaultRequest": null
  },
  "getUserMedia": function getUserMedia() { [native code] },
  "registerProtocolHandler": function registerProtocolHandler() { [native code] },
  "unregisterProtocolHandler": function unregisterProtocolHandler() { [native code] }
}

最佳答案

如评论中所述-可以从Battery API获取充电状态(true/false)battery.charging和充电时间(以秒为单位)battery.chargingTime
在台式机上，充电始终为true，但充电时间始终为0
这使我们可以确定它是台式机

这是测试 table 面是否可用的快速代码段...

navigator.getBattery().then(function(battery) {
    if (battery.charging && battery.chargingTime === 0) {
        console.log("I'm a desktop")
    } else {
        console.log("I'm not a desktop")
    }
});

注意

这不是一门精确的科学。正如@MatheusAvellar指出的那样。我的猜测是，尽管battery.charging可能是正确的，但如果您已充满电，那么battery.chargingTime可能会变为0-无法使用笔记本电脑尝试