檢測客戶端系統是否是筆記本或臺式機使用JavaScript

我想告訴客戶系統的電池狀態，並在我的網頁時鐘在小部件如果它是一臺筆記本電腦。
如果是桌面，我不想顯示電池狀態。
時鐘部件工作正常。檢測客戶端系統是否是筆記本或臺式機使用JavaScript

另外，我可以通過使用navigator.getBattery()獲取電池詳細信息。
但是，如果它是桌面，我不想顯示小部件。

那麼，如何檢測使用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] } 
}

來源

2017-03-04 Sagar V

您可以使用[電池API]（https：//developer.mozilla .org/en-US/docs/Web/API/Battery_Status_API）來獲取狀態，但無法判斷該設備是臺式機還是筆記本電腦。 – Pointy

沒有辦法將設備識別爲筆記本電腦/臺式機。 – BenM

@Pointy - '從Firefox 52開始，電池狀態API僅在Chrome /特權代碼中可用 –

正如在評論中提到 - 有可能獲得來自電池API

充電狀態（真/假）battery.charging和充電時間（單位：秒）battery.chargingTime在一個桌面充電始終是true但充電時間始終爲0

這使我們可以確定它是一個桌面

這裏有一個快速片段，如果桌面測試...

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 - 無法訪問筆記本電腦來嘗試

來源

2017-03-04 13:58:27

非常感謝哥哥 –

高興它幫助隊友 –

這是很好的指出他不會_always_工作。我使用100％充電的筆記本電腦，代碼表示我是臺式機。無論你想要做什麼，請記住，它不會總是準確的。 –

檢測客戶端系統是否是筆記本或臺式機使用JavaScript

回答

相關問題