Question

我使用ASP.NET，C＃和Jquery构建了一个网站。根据要求，我使该网站具有响应性。手段，网站应该以任何分辨率打开，如iPad，平板电脑或手机以及台式机和笔记本电脑。

但是现在还有一个要求，比如在iPad，平板电脑或移动视图中打开网站，然后使用jquery为一个div类提供动态css样式。

目前，台式机和笔记本电脑的分辨率没有问题。移动设备，平板电脑和iPad只有问题。

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

Answer 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等的移动设备检测脚本

Answer 2

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

如果我发现窗口大小是＆lt; = 768（移动设备，平板电脑或Ipad），那么我将左侧的html保留在一个变量中，然后将其附加到右侧部分，然后清除左侧的html。

在这里，您可以查看

<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(''); 
             } 
         } 
     });

使用jQuery检测Ipad，平板电脑或移动设备

2 个答案: