使用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 媒体查询让您的网站动态调整以适应屏幕分辨率。

希望对您有所帮助。