自动检测移动浏览器(通过用户代理?)


291

如何检测用户是否正在通过移动Web浏览器查看我的网站,以便随后可以自动检测并显示适当版本的网站?


12
iPad算在内吗?:)
Seva Alekseyev 2010年

33
Seva的评论提出了一个很好的问题。今天“移动”到底是什么意思?它是否指的是具有浏览器但没有太多浏览器的“功能手机”?它是否指的是输入方法和显示分辨率是限制因素的全功能智能手机?既易于交互又具有高分辨率显示的平板电脑怎么样?媒体中心之类的设备怎么样-它们从不离开客厅,但它们也有类似的局限性。工作中的一个朋友给我发了这个。我发现它很有见识。 slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
spaaarky21 2011年

1
@Ricki,但是在ipad上,您仍然无法例如显示Flash内容或使用基于JavaScript的RTF编辑器(如tinymce)。
TJ Ellis

1
iPad无法查看Flash,但这就是另一个主题,例如检测浏览器是否支持Flash。
肖恩

2
只是未来的帖子,但是任何对提供其网站的移动版本感兴趣的人都可能对“响应式设计”的某些文章感兴趣。
Vael Victus

Answers:


91

是的,读取User-Agent标头即可解决问题。

那里有一些已知的移动用户代理列表 因此您无需从头开始。我必须要做的是建立一个已知用户代理的数据库,并在检测到未知版本以进行修订时存储未知内容,然后手动找出它们是什么。在某些情况下,这最后一件事可能会过大。

如果要在Apache级别执行此操作,则可以创建一个脚本,该脚本定期生成一组重写规则,以检查用户代理(或者一次就忘记新的用户代理,或者每月一次,只要适合您的情况),例如

RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1

例如,将请求从http://domain/index.html移到 http://domain/mobile/index.html

如果您不喜欢使用脚本定期重新创建htaccess文件的方法,则可以编写一个模块来检查用户代理(我没有找到一个已经创建的模块,但是找到了这个特别合适的示例)并获取了用户代理。从某些网站进行更新。然后,您可以根据需要将方法复杂化,但是我认为您的情况下,以前的方法会很好。


3
是否可以通过某种类型的.htaccess命令在Web服务器层(Apache)上完成此操作-而不是使用脚本语言(如PHP)?

由用户代理设置文档根目录的任何想法
卡森(Carson)

126

检测移动浏览器上有开源脚本,可以在Apache,ASP,ColdFusion,JavaScript和PHP中执行此操作。


5
@guitar如果是这种情况,那么您应该发送您的UA。
亚当·塔特尔

9
Bleh ...我真的不喜欢这些解决方案的“代码味道”。使用一串4个字符的前缀进行正则表达式匹配,不知道它们最初来自何处……不,谢谢。
我们都是莫妮卡(Monica)

2
那是一个过时的正则表达式声明。我同意,此代码的气味不好。
杰克·考克斯

5
我也不喜欢没有许可证且没有更新指示的“开源”解决方案。
爱德华多

12
但是没有办法解决。在某种程度上,任何类型的解决方案都将对用户代理进行正则表达式检查。
凯尔2012年

33

只是一个想法,但是如果您从相反的方向解决这个问题怎么办?而不是确定哪些浏览器是移动的,为什么不确定哪些浏览器不是移动的?然后,将您的网站编码为默认为移动版本,然后重定向到标准版本。查看移动浏览器时,有两种基本的可能性。它具有javascript支持或没有。因此,如果浏览器不支持javascript,它将默认为移动版本。如果它确实支持JavaScript,请检查屏幕尺寸。小于特定大小的任何内容都可能是移动浏览器。任何较大的内容都将重定向到您的标准布局。然后,您需要做的就是确定禁用JavaScript的用户是否是移动用户。
根据W3C,禁用JavaScript的用户数量约为5%,其中大多数用户已将其关闭,这意味着他们实际上知道他们在使用浏览器做什么。他们是观众的很大一部分吗?如果没有,那就不用担心它们。如果是这样,最坏的情况是什么?您可以让那些用户浏览您网站的移动版本,这是一件好事。


3
这是一个很好的主意,我认为这是一个优雅的解决方案。
Maxim Veksler,2010年

3
+1听起来不错,但是这会影响搜索引擎抓取工具吗?
Mikey G

这是一个误导的想法。禁用javascript的浏览器扩展在桌面浏览器中非常流行,因此,假设没有javascript意味着移动设备是完全错误的。窗口/视口/屏幕的分辨率与浏览器的大小无关,并且假定低分辨率表示手持设备的大小将使您的Web应用程序难看并使许多用户感到沮丧。(例如:非全屏窗口,大型平板电脑中的桌面浏览器。)
2013年

31

这是我在JavaScript中执行的操作:

function isMobile() {
  var index = navigator.appVersion.indexOf("Mobile");
  return (index > -1);
}

请参见www.tablemaker.net/test/mobile.html上的示例,该示例将手机字体大小增加了三倍。


如果您想合并帐户,请参见:meta.stackexchange.com/questions/18232/…–
Brandon

对于平板电脑(例如iPad),这将不起作用
Si8 2014年

因为使用Opera Mobile,所以请使用“ mobi”。
mgutt

1
并且您需要“ Opera Mini”,因为这是用户代理中不使用“ mobi”的罕见浏览器之一。
mgutt


17

您是否考虑过使用CSS3媒体查询?在大多数情况下,您可以为目标设备专门应用某些CSS样式,而无需创建站点的单独移动版本。

@media screen and (max-width:1025px) {
   #content {
     width: 100%;
   }
}

您可以将宽度设置为任意值,但是1025可以捕捉到iPad横向视图。

您还需要在头部添加以下元标记:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

在HTML5 Rocks上查看本文,了解一些很好的示例


1
我认为这实际上是最好的方法。查看用户代理字符串的脚本注定会过时。查看可用的屏幕空间可以进行响应式设计,而不必担心不会检测到新设备。
亚当·塔特尔

1
这仅适用于客户端检测。但是,如果您希望服务器端对移动客户端的行为有所不同,则需要使用其他技术。
Igor Brejc,2013年

对于未全屏运行的桌面浏览器,这将导致失败。如果您仍然选择这样做,请不要浪费大量字体和边距来浪费屏幕空间,也不要在下拉菜单后隐藏重要的功能/信息。这会使您的网站/应用很难看,也让某些用户感到沮丧。
ʇsәɹoɈ

13

适用于ANDROID,IPHONE,IPAD,BLACKBERRY,PALM,WINDOWS CE,PALM

 <script language="javascript"> <!--
     var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
              if (mobile) {
                  alert("MOBILE DEVICE DETECTED");
                  document.write("<b>------------------------------------------<br>")
                  document.write("<b>" + navigator.userAgent + "<br>")
                  document.write("<b>------------------------------------------<br>")
                  var userAgent = navigator.userAgent.toLowerCase();
                  if ((userAgent.search("android") > -1) && (userAgent.search("mobile") > -1))
                         document.write("<b> ANDROID MOBILE <br>")
                   else if ((userAgent.search("android") > -1) && !(userAgent.search("mobile") > -1))
                       document.write("<b> ANDROID TABLET <br>")
                   else if ((userAgent.search("blackberry") > -1))
                       document.write("<b> BLACKBERRY DEVICE <br>")
                   else if ((userAgent.search("iphone") > -1))
                       document.write("<b> IPHONE DEVICE <br>")              
                   else if ((userAgent.search("ipod") > -1))
                       document.write("<b> IPOD DEVICE <br>")
               else if ((userAgent.search("ipad") > -1))
                       document.write("<b> IPAD DEVICE <br>")
                       else
                   document.write("<b> UNKNOWN DEVICE <br>")
              }
              else
                  alert("NO MOBILE DEVICE DETECTED"); //--> </script>

我发现这很有帮助。
bozdoz

您绝对应该检查一下Conditionizr,它将为您处理所有这一切!您可以添加自定义测试,通过对象测试获取它们并具有回调。他们还提供了一系列预制测试:conditionizr.com/detects
Halcyon991 2013年

Elenasys,谢谢您的有用回答。虽然,但是在数据库中找不到与“ windows \ sce”匹配的UA。
nefski 2014年

1
这不适用于Windows Phone。
jwerre

谢谢,但未指定Windows Phone ...
Jorgesys

6

移动设备浏览器文件是检测ASP.NET项目的移动(和其他)浏览器的好方法:http ://mdbf.codeplex.com/


移动设备浏览器仍在工作吗?我注意到有一种关于它离线的符号吗?...
creativeedg10

5

您可以通过轻松检测移动客户端 navigator.userAgent,并根据检测到的客户端类型加载备用脚本,如下所示:

 $(document).ready(function(e) {

        if(navigator.userAgent.match(/Android/i)
          || navigator.userAgent.match(/webOS/i)
          || navigator.userAgent.match(/iPhone/i)
          || navigator.userAgent.match(/iPad/i)
          || navigator.userAgent.match(/iPod/i)
          || navigator.userAgent.match(/BlackBerry/i)
          || navigator.userAgent.match(/Windows Phone/i)) {

         //write code for your mobile clients here.

          var jsScript = document.createElement("script");
          jsScript.setAttribute("type", "text/javascript");
          jsScript.setAttribute("src", "js/alternate_js_file.js");
          document.getElementsByTagName("head")[0].appendChild(jsScript );

          var cssScript = document.createElement("link");
          cssScript.setAttribute("rel", "stylesheet");
          cssScript.setAttribute("type", "text/css");
          cssScript.setAttribute("href", "css/alternate_css_file.css");
          document.getElementsByTagName("head")[0].appendChild(cssScript); 

    }
    else{
         // write code for your desktop clients here
    }

    });

对于更易管理的解决方案,您可以使用Conditionizr,它将为您处理所有这一切!您可以添加自定义测试,通过对象测试获取它们并具有回调。他们还提供了一系列预制测试:conditionizr.com/detects
Halcyon991 2013年

4

您可以检查User-Agent字符串。在JavaScript中,这确实很容易,它只是navigator对象的一个​​属性。

var useragent = navigator.userAgent;

您可以检查设备是否在JS中使用iPhone或Blackberry,例如

var isIphone = !!agent.match(/iPhone/i),
    isBlackberry = !!agent.match(/blackberry/i);

如果isIphone为true,则从Iphone访问该站点;如果isBlackBerry,则从Blackberry访问该站点。

您可以使用FireFox的“ UserAgent Switcher”插件进行测试。

如果您也有兴趣,值得在这里https://github.com/sebarmeli/JS-Redirection-Mobile-Site上查看托管在github上的我的脚本“ redirection_mobile.js”,您可以在以下内容之一中阅读更多详细信息:我的文章在这里:

http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version-through-javascript/


1
在这里使用.match是错误的,您想使用.test()来评估一个布尔值,它也比.match()快得多,并且不返回数组。对于您的userAgent测试更可管理的解决方案,您可以使用Conditionizr,它将为您处理所有这一切!您可以添加自定义测试,通过对象测试获取它们并具有回调。他们还得到了一系列预制的可用的测试:conditionizr.com/detects
Halcyon991

4
protected void Page_Load(object sender, EventArgs e)
{
    if (Request.Browser.IsMobileDevice == true)
    {
        Response.Redirect("Mobile//home.aspx");
    }
}

此示例在asp.net中有效



0

是的,用户代理用于检测移动浏览器。有很多免费的脚本可用来检查这一点。这是一个这样的php代码,它将帮助您将移动用户重定向到其他网站。


1
是否可以通过某种类型的.htaccess命令在Web服务器层(Apache)上完成此操作-而不是使用PHP?

0

我将这个演示与脚本和示例放在一起:

http://www.mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/

此示例利用php函数进行用户代理检测,并提供了额外的好处,即允许用户根据网站的浏览器或设备类型来声明对网站版本的偏好(通常不是默认值)。这是通过Cookie(在服务器端使用php而非javascript进行维护)完成的。

请确保查看本文中的示例下载链接。

希望你喜欢!


0

MobileESP具有PHP,Java,APS.NET(C#),Ruby和JavaScript挂钩。它还具有Apache 2许可证,因此可以免费商业使用。对我来说,关键是它只能识别浏览器和平台,而不能识别屏幕尺寸和其他指标,这使其显得很小。


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.