logo标签列表

如何使用JavaScript检测移动设备？

javascripthtmlmobiledevice
86

我被要求创建一个实际的HTML页面/JavaScript，以模拟使用JavaScript代码检测移动设备（iPhone/iPad/Android）的过程。然后，它将带用户进入另一个屏幕，要求他们输入电子邮件地址。

如果您能够知道屏幕尺寸，那么您就可以区分iPhone和iPad。 - lovesh
1
你可以使用以下代码： https://dev59.com/WWgu5IYBdhLWcg3wWl4q#13819253 - Mudaser Ali
21个回答
3

我建议您查看http://wurfl.io/

简单来说，如果您导入一个小的JS文件：

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

你将得到一个看起来像这样的JSON对象：
{
 "complete_device_name":"Google Nexus 7",
 "is_mobile":true,
 "form_factor":"Tablet"
}

（假设您正在使用Nexus 7），您将能够执行以下操作：
WURFL.complete_device_name

这就是你在寻找的内容。
声明：我在提供此免费服务的公司工作。谢谢。
只要您的网站是公开可用的，并且不需要付费或订阅费用即可访问，您就可以免费使用这些服务。 - Exel Gamboa
2
基于用户代理的设备检测并不是一个很好的解决方案，更好的方法是检测触摸设备等功能（在新版jQuery中，他们移除了$.browser 并改用$.support）。
要检测移动设备，可以检查触摸事件：
function is_touch_device() {
  return 'ontouchstart' in window // works on most browsers 
      || 'onmsgesturechange' in window; // works on ie10
}

摘自如何使用JavaScript检测“触摸屏”设备的最佳方法？

因为OP正在寻求移动设备，所以被踩。随着触摸屏笔记本电脑的普及，“触摸设备”并不是一个很好的解决方案。 - TheBrenny
1
@thebrenny 笔记本电脑是移动设备，伙计，它们可以轻松地从一个地方搬到另一个地方。 - B''H Bi'ezras -- Boruch Hashem
哦，天啊，我有一些笔记本电脑真的很不适合移动使用！但无论如何，OP给了iPhone、iPad和Android作为要检测的示例，“mobile”的缩写是“mobile phone”。也许更好的描述应该是“无键盘”。 - TheBrenny
2
有趣的是，尽管我们有这个 MDN 链接，但这个功能在 FF 上不可用。 - KuN
到2022年中，userAgentData的支持率相当低，只有71%。 - okram
2
测试用户代理是复杂、混乱且往往失败的。我也发现“手持设备”的媒体匹配对我没用。最简单的解决方案是检测鼠标是否可用。可以这样做：
let isMouseAvailable = window.matchMedia("(any-pointer:coarse)").matches;

这将告诉您是否需要显示悬停项或任何需要物理指针的内容。然后可以根据宽度进一步进行媒体查询来调整大小。
下面的小库是上述查询的保险带版本，应该涵盖大多数“您是平板电脑还是没有鼠标的手机”的情况。

https://patrickhlauke.github.io/touch/touchscreen-detection/

自2015年以来，支持媒体匹配（Media matches），您可以在此处检查兼容性： https://caniuse.com/#search=matchMedia 简而言之，您应该维护与屏幕是否为触摸屏以及屏幕尺寸相关的变量。理论上，我可能会在鼠标操作的桌面上使用小屏幕。
如果您想确定是否显示悬停项，那么不应该使用媒体查询(hover)吗？ - SpoonMeiser
@SpoonMeiser 我的意思是，即使设备支持悬停，我也需要一个能够悬停的设备。如果我没有指针，我就无法悬停。 - PeterS
如果我理解正确，悬停是指主输入设备支持悬停，指针可以但触摸屏不行。 - SpoonMeiser
我建议改进代码，使其更易于理解你在做什么 - 'var result'？你在测试什么？换成 'var isDeviceMobile' 或 'var isDeviceDesktop' 怎么样？因为当鼠标存在时匹配的是 'fine' 而不是 'coarse'。 否则我认为这是一个很好的答案！谢谢 - okram
这让我想到 - 你能用蓝牙鼠标在手机或平板电脑上工作吗？或者甚至通过电缆连接的鼠标？那么我猜这样检测会失败。 - okram
@okram 是的，它可能会失败。我看到我的答案是三年前的，现在可能需要修订。你会看到控制器有很多变化，比如使用Xbox控制器来操作某些东西。无论如何，我会进行代码改进的。 - PeterS
2

这是一个关于如何检查网页加载在桌面端还是移动应用程序中的示例。

当页面加载时，JS将执行，您可以在页面加载时进行桌面端特定的操作，例如隐藏条形码扫描器。

   <!DOCTYPE html>
    <html>
    <head>
     <script type="text/javascript">

            /*
            * Hide Scan button if Page is loaded in Desktop Browser
            */
            function hideScanButtonForDesktop() {

                if (!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent))) {

                    // Hide scan button for Desktop
                    document.getElementById('btnLinkModelScan').style.display = "none";
                }         
            }

            //toggle scanButton for Desktop on page load
            window.onload = hideScanButtonForDesktop;
        </script>
    </head>
1
确定需要模拟的设备的用户代理是什么，然后针对该代理测试一个变量。
例如：
// var userAgent = navigator.userAgent.toLowerCase(); // this would actually get the user agent

var userAgent = "iphone"; /* Simulates User Agent for iPhone */
if (userAgent.indexOf('iphone') != -1) {
   // some code here
}
!!~userAgent.indexOf('iphone') // >> true|false - Cody
0
另一种可能性是使用mobile-detect.js。请尝试演示。

浏览器使用：

<script src="mobile-detect.js"></script>
<script>
    var md = new MobileDetect(window.navigator.userAgent);
    // ... see below
</script>

Node.js / Express:

var MobileDetect = require('mobile-detect'),
    md = new MobileDetect(req.headers['user-agent']);
// ... see below

例子：

var md = new MobileDetect(
    'Mozilla/5.0 (Linux; U; Android 4.0.3; en-in; SonyEricssonMT11i' +
    ' Build/4.1.A.0.562) AppleWebKit/534.30 (KHTML, like Gecko)' +
    ' Version/4.0 Mobile Safari/534.30');

// more typically we would instantiate with 'window.navigator.userAgent'
// as user-agent; this string literal is only for better understanding

console.log( md.mobile() );          // 'Sony'
console.log( md.phone() );           // 'Sony'
console.log( md.tablet() );          // null
console.log( md.userAgent() );       // 'Safari'
console.log( md.os() );              // 'AndroidOS'
console.log( md.is('iPhone') );      // false
console.log( md.is('bot') );         // false
console.log( md.version('Webkit') );         // 534.3
console.log( md.versionStr('Build') );       // '4.1.A.0.562'
console.log( md.match('playstation|xbox') ); // false
0

这是我的版本，与上面的版本相似，但我认为很适合参考。

if (mob_url == "") {
  lt_url = desk_url;
} else if ((useragent.indexOf("iPhone") != -1 || useragent.indexOf("Android") != -1 || useragent.indexOf("Blackberry") != -1 || useragent.indexOf("Mobile") != -1) && useragent.indexOf("iPad") == -1 && mob_url != "") {
  lt_url = mob_url;
} else {
  lt_url = desk_url;
}
0

只需使用设备检测

deviceDetection.deviceType // phone | tablet according to device
你为他们工作吗？那只是使用了用户代理。 - B''H Bi'ezras -- Boruch Hashem
0

由于我（在某种程度上没有成功地）寻找适当的解决方案来进行我的黑客，但无论如何，我希望在这里添加我的黑客：我简单地检查设备方向的支持，这似乎是移动设备和桌面之间最重要的区别：

var is_handheld = 0; //只是一个全局变量 if(window.DeviceOrientationEvent){is_handheld = 1;}

话虽如此，我个人认为页面还应该提供移动/桌面布局之间的手动选择。我有1920*1080的分辨率，可以对其进行缩放 - 过于简化和功能减少的WordPressoid组件并不总是一件好事。特别是基于不起作用的设备检测来强制使用布局 - 这种情况时常发生。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接