logo标签列表

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

javascripthtmlmobiledevice
86

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

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

我知道这个回答来得有点晚，但是没有其他回答确实是100%正确的。如果你想要检测用户是否在任何移动设备上（Android、iOS、BlackBerry、Windows Phone、Kindle等），那么你可以使用以下代码：

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
    // Take the user to a different screen here.
}
1
我会加上关键词“移动端”。 - Király István
3
你需要某种图书馆吗？我怀疑事情并不那么简单。 - user8231918
这段代码片段有所帮助，但模拟移动设备的网络浏览器存在问题。请帮忙解决。 - 4302836
30
你可以检测请求浏览器的用户代理字符串，然后根据它来判断是否来自移动浏览器。由于移动设备的用户代理并没有标准化（至少在我所知道的范围内），因此该设备并不完美，也永远不会完美。

该网站将帮助你创建代码：http://www.hand-interactive.com/resources/detect-mobile-javascript.htm

例如:

你可以通过以下javascript代码获取用户代理：

var uagent = navigator.userAgent.toLowerCase();

然后按照这个格式进行检查（只是举了一个快速示例，使用iPhone，但其他需要略有不同）

function DetectIphone()
{
   if (uagent.search("iphone") > -1)
      alert('true');
   else
      alert('false');
}

编辑

你可以创建一个简单的 HTML 页面，例如：

<html>
    <head>
        <title>Mobile Detection</title>
    </head>
    <body>
        <input type="button" OnClick="DetectIphone()" value="Am I an Iphone?" />
    </body>
</html>
<script>
    function DetectIphone()
    {
       var uagent = navigator.userAgent.toLowerCase();
       if (uagent.search("iphone") > -1)
          alert('true');
       else
          alert('false');
    }
</script>
但我在想从哪里开始？创建一个虚拟网页，并将此代码嵌入其中。我们将使用HTML吗？因为如我在上面的代码中提到的，我没有任何起点。 - Jeevs
太好了！！！谢谢你。那么如何将它重定向到另一个页面呢？你认为这样做有帮助吗？如果((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/Android/i))) { if (document.cookie.indexOf("iphone_redirect=false") == -1) window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR"; - Jeevs
1
请不要忘记用户代理可以被更改、欺骗和可能不能反映当前浏览器的情况。话虽如此，如果客户欺骗/更改其用户代理并且您显示了错误的视图，则是他们自己的责任。除了纯用户代理之外还有其他方法，尽管用户代理通常是所有检测的根源。这里有一个非常好的（尽管过时的）示例：https://github.com/ahand/mobileesp?files=1 - Nico
聪明 - 从未想过那个 :D - Stardust
21

一个相当简单的解决方案是检查屏幕宽度。由于几乎所有移动设备的最大屏幕宽度目前都为480像素，因此这种方法非常可靠:

if( screen.width <= 480 ) {
    location.href = '/mobile.html';
}

用户代理字符串也是一个需要查看的地方。然而，前一种解决方案仍然更好，因为即使某些恶心的设备对于用户代理不正确响应，屏幕宽度也不会欺骗你。

唯一的例外是像iPad这样的平板电脑。这些设备的屏幕宽度比智能手机高，我可能会选择用户代理字符串来识别它们。

没错！我只需要检测iPhone或Android。所以这不应该是个问题，但是只是想让你知道我一无所知。我需要创建一个虚拟网页并嵌入吗？另外，如何检查检测是否有效？我需要将脚本传输到手机上吗？ - Jeevs
14
哇，屏幕宽度变化真大啊 ;) - Josh Noe
17
if(navigator.userAgent.match(/iPad/i)){
 //code for iPad here 
}

if(navigator.userAgent.match(/iPhone/i)){
 //code for iPhone here 
}


if(navigator.userAgent.match(/Android/i)){
 //code for Android here 
}



if(navigator.userAgent.match(/BlackBerry/i)){
 //code for BlackBerry here 
}


if(navigator.userAgent.match(/webOS/i)){
 //code for webOS here 
}
这是最好且最简洁的解决方案。 - eluleci
2
尽管此代码一遍又一遍地检查一个东西，不会执行多个块，但由于这个原因，此代码应该利用else-if块。另外，如果用户代理变量在块之间以某种方式更改，会执行超过1个块。 - Jake Millington
你说得对，别忘了那段代码是4年前写的 :) 现在有更好的工具或方法来完成同样的工作。 - Ahmed Abu Eldahab
9
var isMobileDevice = navigator.userAgent.match(/iPad|iPhone|iPod/i) != null 
    || screen.width <= 480;
3
+1 用于正则表达式匹配，允许用户一次轻松检查多个设备。但是，为了清晰起见，我会添加 /i 到正则表达式的末尾以进行不区分大小写的匹配，因此在搜索参数中使用驼峰命名法实际上是没有必要的。以下代码也可以等效地搜索 Android 设备： .match(/ipad|iphone|ipod|android/i) - Russ
7

一个简单的解决方案可以是纯CSS。您可以在样式表中设置样式，然后在其底部进行调整。现代智能手机的屏幕宽度看起来只有480像素，实际上要多得多。在CSS中检测较小屏幕的代码如下：

@media handheld, only screen and (max-width: 560px), only screen and (max-device-width: 480px)  {
    #hoofdcollumn {margin: 10px 5%; width:90%}
}

希望这能帮到你！
6

我使用mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)

这段代码与检测用户设备相关，它会检查用户的设备类型是否为安卓、苹果或黑莓等移动设备。如果是移动设备，则返回true，否则返回false。
5

所以我做了这件事。谢谢大家！

<head>
<script type="text/javascript">
    function DetectTheThing()
    {
       var uagent = navigator.userAgent.toLowerCase();
       if (uagent.search("iphone") > -1 || uagent.search("ipad") > -1 
       || uagent.search("android") > -1 || uagent.search("blackberry") > -1
       || uagent.search("webos") > -1)
          window.location.href ="otherindex.html";
    }
</script>

</head>

<body onload="DetectTheThing()">
VIEW NORMAL SITE
</body>

</html>
5

既然现在已经是2015年了，如果你偶然发现这个问题，那么你应该使用window.matchMedia（如果仍然是2015年，需要为旧浏览器提供polyfill）：

if (matchMedia('handheld').matches) {
    //...
} else {
    //...
}
这在我的Nexus 5上运行Firefox时没有起作用。 - raphael
2
来自MDN的注意事项： 注意：CSS2.1和Media Queries 3定义了几个附加的媒体类型（tty、tv、projection、handheld、braille、embossed、aural），但在Media Queries 4中它们已被弃用，不应再使用。 - PaulCo
看到我的回答，不知道为什么手持设备对我也不起作用。 - PeterS
3
您可以使用用户代理字符串来检测此信息。
var useragent = navigator.userAgent.toLowerCase();

if( useragent.search("iphone") )
    ; // iphone
else if( useragent.search("ipod") )
    ; // ipod
else if( useragent.search("android") )
    ; // android
etc

您可以在此处查找用户代理字符串 http://www.useragentstring.com/pages/useragentstring.php。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接