使用 jQuery 检测 Ipad、平板电脑或移动设备答案

【问题标题】：Detect Ipad, tablet or mobile Devices using jQuery使用 jQuery 检测 Ipad、平板电脑或移动设备
【发布时间】：2015-04-17 23:03:23
【问题描述】：

我有一个使用 ASP.NET、C# 和 Jquery 构建的网站。根据要求，我使该网站具有响应性。也就是说，网站应该以任何分辨率打开，例如 iPad、平板电脑或移动设备以及台式机和笔记本电脑。

但是现在还有一个要求，例如如果在 iPad、平板电脑或移动视图中打开网站，那么我需要使用 jquery 提供动态 css 样式的一个 div 类。

目前，台式机和笔记本电脑的分辨率没有问题。只有手机、平板电脑和 iPad 才有问题。

所以，我需要知道的是 如何使用 Jquery 检测该网站是否在 Ipad、平板电脑或移动设备中打开？

【问题讨论】：

这不是安卓编程。在网页部分询问。
What is the best way to detect a mobile device in jQuery? 的可能重复项

标签： jquery css responsive-design

【解决方案1】：

使用 JavaScript 函数检测移动设备

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

if(isMobile.any()) {
   alert("This is a Mobile Device");
}

另一个检测移动设备的 JavaScript 技巧

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  // tasks to do if it is a Mobile Device
  alert("Mobile Detected");

}

Detect Mobile Browser 拥有大量用于检测移动设备的脚本。您可以获得 Apache、ASP、ASP.NET、ColdFusion、C#、IIS、JSP、JavaScript、jQuery、Lasso、nginx、node.js、PHP、Perl、Python、Rails 等的移动设备检测脚本

【讨论】：

浏览器嗅探确实已成为过去。特征检测应该是方法...
当然，我并不讨厌......但我认为屏幕尺寸检查，然后是一个用于窗口的“ontouchstart”布尔值排除了除了键盘触摸板之外的所有内容。
@Shikkediel.. 我同意！！屏幕尺寸检查可以在 CSS @media 查询中实现，这比 js 容易得多。.. :) 然后我认为我的答案不适合实现这些.. :)

【解决方案2】：

我在下面创建了 JavaScript 函数并创建了两个 css 类。 1. 左侧部分 2.右侧部分

如果我发现窗口大小为

在这里，你可以检查

<script type="text/javascript">
    var tempListing; 
     $(document).ready(function () {
         tempListing = $(".left_side").html(); // Keep HTML in this variable.



         var win = $(this); //this = window 
         if (win.width() <= 768) { //This will check windows resolution means width 
             if (tempListing.trim().length > 0) { 
                 $(".right_side").append(tempListing); 
                 $(".left_side").html(''); 
             } 
         } 
     });

【讨论】：