检测设备是否为平板电脑

Str*_*epk 2 javascript

如何检测设备是否是平板电脑?下面的这个脚本不能正常工作。

var ua = navigator.userAgent, tablet = /Tablet|iPad/i.test(ua);
alert("Tablet? " + tablet);
Run Code Online (Sandbox Code Playgroud)

我不想检查是否是移动设备并使用else来显示平板电脑。我只想要一个功能来确认是否是平板电脑。我怎样才能做到这一点?谢谢

Joe*_*ner 13

如果您只想使用 vanilla javascript,您可以使用 navigator API

const userAgent = navigator.userAgent.toLowerCase();
const isTablet = /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/.test(userAgent);
console.log(isTablet)
Run Code Online (Sandbox Code Playgroud)

https://developer.mozilla.org/en-US/docs/Web/API/Window/navigator

但我建议使用诸如 wurfl.io 之类的库

https://web.wurfl.io/#wurfl-js

if (WURFL.is_mobile === true && WURFL.form_factor === "Tablet") {
    // targetSmartPhoneDevices();
}
Run Code Online (Sandbox Code Playgroud)

  • 有很多方法可以欺骗用户代理,例如 [这个扩展](https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=en)。`navigator.userAgent` 本质上毫无价值,因为它不值得信赖。最好使用 CSS 媒体查询检查设备宽度以获取动态样式,或者如果使用现代或实验性 API 以及旧浏览器的回退,则使用 Modernizr 以获取支持。并且 OP 明确表示他们不想使用外部库。 (3认同)
  • 老评论,但只是想反驳 @PatrickRoberts 的 userAgent “毫无价值”的断言。可以欺骗的事实是无关紧要的。这是一种通知我想代表哪个用户代理的方式。换句话说,欺骗是一个功能,而不是一个错误。如果用户想在移动设备上看到桌面版本,那么这应该由他们决定。如果设备类型的可信度对您来说是个问题,那么我会怀疑您的项目中存在设计缺陷。 (3认同)