使用modernizr检测设备

我设计了一个使用设备宽度检测设备的页面，并基于它加载了尊重的js和css文件。我如何评价Modernizr的3个条件，哪个是更好的方式来检测设备（台式机，手机或平板电脑）使用modernizr检测设备

<script type="text/javascript"> 
      Modernizr.load([ 
       { 
        test: Modernizr.mq('(min-device-width: 320px) and (max-device-width: 728px)'), 
        yep : ['mob.css', 'jquery.mobile-1.1.0.css', 'jquery.mobile-1.1.0.js'], 
        nope : 'pc.css' 
       } 
      ]); 

      if (!Modernizr.borderradius) { 
       $.getScript("jquery.corner.js", function() { 
        $("input").corner(); 
       }); 
      } 

      if(!Modernizr.required) { 
       $("#frmSearch").submit(function(){ 
        if($.trim($("#txtSearch").val().length) == 0){ 
         alert('Please, Enter some keyword'); 
         return false; 
        } 
       }); 
      } 
     </script>

来源

2012-05-19 chako

在CSS中使用媒体查询？ – Neil

好的，你能给我举个例子吗？因为我已经使用了modernizr.mq – chako

第一我想通过使用3条件检测设备。我如何在modernizr中编写3个条件？ – chako

如果你要做到这一点在Modernizr的，我会说不要尝试写一个三路条件;写三个单独的真/假条件。

即不是说有“桌面”，“移动”或“平板电脑”一个条件，你应该有三个条件称为“桌面”，“移动”或“平板电脑”，其中每一个将是真实的或假。

希望能回答你的问题。

但是，我想提出的另一点是如何画这些类型之间的界限？

很容易说iPhone是一款手机，iPad是一款平板电脑，但其间有各种尺寸的设备;移动设备成为平板电脑的切点在哪里？那么可以连接到基本单元成为笔记本电脑的平板电脑呢？

您将要面临的麻烦是外形因素非常流畅;因此您可能永远无法确定某些设备属于哪个类别。您可能更适合使用响应式CSS和CSS媒体查询来动态调整网站的屏幕分辨率。

希望有所帮助。

来源

2012-05-20 21:33:54 Spudley

是的你是对的。我通过更改浏览器窗口大小来检查它，并且我的UI变得很糟糕。我希望如果浏览器的最小宽度是320px，它应该显示移动用户界面。我如何做这个改变？ – chako

以及如何在modernizr中编写3个条件来检查桌面，移动设备和桌面？ – chako

@chacko - 对'Modernizr.load（）'进行三次独立调用。您如何定义桌面，移动设备和平板电脑之间的差异取决于您，但是您需要针对每个需要检查的独特条件进行单独的Modernizr.load（）测试，每个条件都有自己的'yep'和'nope'响应。 – Spudley

使用modernizr检测设备

回答

相关问题