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

希望对您有所帮助。