如何使用jQuery检测移动设备

有没有办法检测用户是否在jQuery中使用移动设备？类似于CSS@media属性？如果浏览器在手持设备上，我希望运行不同的脚本。

jQuery$.browser函数不是我想要的。

当前回答

这似乎是一个全面的现代解决方案：

https://github.com/matthewhudson/device.js

它可以检测多个平台，智能手机与平板电脑，以及方向。它还将类添加到BODY标记中，因此检测只发生一次，您可以通过一系列简单的jQuery hasClass函数来读取所使用的设备。

过来看。。。

[免责声明：我与写这封信的人无关。]

2014-05-05 10:43:39

其他回答

我知道这个问题有很多答案，但从我所看到的情况来看，没有人能以我的方式解决这个问题。

CSS使用宽度（媒体查询）来确定应用于基于宽度的web文档的样式。为什么不在JavaScript中使用宽度？

例如，在Bootstrap（Mobile First）媒体查询中，存在4个快照/断点：

超小型设备为768像素及以下。小型设备的像素范围从768到991。中等设备的范围从992到1199像素。大型设备为1200像素及以上。

我们也可以使用它来解决JavaScript问题。

首先，我们将创建一个函数，该函数获取窗口大小并返回一个值，该值允许我们查看设备正在查看我们的应用程序的大小：

var getBrowserWidth = function(){
    if(window.innerWidth < 768){
        // Extra Small Device
        return "xs";
    } else if(window.innerWidth < 991){
        // Small Device
        return "sm"
    } else if(window.innerWidth < 1199){
        // Medium Device
        return "md"
    } else {
        // Large Device
        return "lg"
    }
};

现在我们已经设置了函数，我们可以调用它并存储值：

var device = getBrowserWidth();

你的问题是

如果浏览器在手持设备上，我希望运行不同的脚本。

现在我们有了设备信息，剩下的就是if语句：

if(device === "xs"){
  // Enter your script for handheld devices here 
}

下面是CodePen的示例：http://codepen.io/jacob-king/pen/jWEeWG

2015-12-08 17:54:00

我为.NET应用程序执行此操作。

在共享的_Layout.cshtml页面中，我添加了这个。

@{
    var isMobileDevice = HttpContext.Current.Request.Browser.IsMobileDevice;
}

<html lang="en" class="@((isMobileDevice)?"ismobiledevice":"")">

然后检查站点中的任何页面（jQuery）：

<script>
var isMobile = $('html').hasClass('ismobiledevice');
</script>

2015-12-10 23:48:01

这不是jQuery，但我发现了这个：http://detectmobilebrowser.com/

它提供了检测多种语言的移动浏览器的脚本，其中一种是JavaScript。这可能会帮助你找到你想要的东西。

但是，由于您使用的是jQuery，您可能需要了解jQuery.support集合。它是用于检测当前浏览器功能的财产集合。文档位于此处：http://api.jquery.com/jQuery.support/

因为我不知道你到底想做什么，所以我不知道其中哪一个最有用。

尽管如此，我认为最好的选择是使用服务器端语言（如果可以选择的话）重定向或编写不同的脚本到输出。由于您并不真正了解移动浏览器x的功能，因此在服务器端执行检测和更改逻辑将是最可靠的方法。当然，如果您不能使用服务器端语言，所有这些都是一个悬而未决的问题：）

2010-08-18 18:02:13

如果你不特别担心小显示器，你可以使用宽度/高度检测。这样，如果宽度小于一定大小，移动网站就会被抛出。这可能不是完美的方法，但对于多个设备来说，这可能是最容易检测到的。您可能需要为iPhone4（大分辨率）设置一个特定的分辨率。

2010-08-18 19:46:16

http://www.w3schools.com/jsref/prop_nav_useragent.asp

按平台名称筛选。

Ex:

x = $( window ).width();

platform = navigator.platform;

alert(platform);

if ( (platform != Ipad) || (x < 768) )  {


}

2015-03-02 17:38:53

如何使用jQuery检测移动设备

推荐文章

最新文章

标签