使用modernizr检测设备

Question

我设计了一个页面，它使用设备宽度检测设备，并根据它加载尊重的js和css文件。 我如何评估modernizr中的3个条件，哪个是检测设备（桌面，移动设备或平板电脑）的更好方法

<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>

Answer 1

如果你要在Modernizr中这样做，我会说不要试图写一个三向条件; 写三个单独的真/假条件。

也就是说，您应该有三个条件称为“桌面”，“移动”或“平板电脑”，而不是一个条件“桌面”，“移动”或“平板电脑”，每个条件都是真或假。

希望能回答你的问题。

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

很容易说iPhone是移动设备而iPad是平板电脑，但它们之间有各种尺寸的设备; 移动设备成为平板电脑的截止点在哪里？ 那些可以连接到基本单元成为笔记本电脑的平板电脑呢？

你在这里遇到的麻烦是外形非常流畅; 因此，您可能永远不会对某些设备确定它们属于哪个类别。您可能最好只使用响应式CSS和CSS媒体查询使您的网站动态调整到屏幕分辨率。

希望有所帮助。