根据屏幕大小触发不同的jQuery事件-设备宽度问题

Question

我想显示不同的div，这取决于用户是在我的移动网站上还是在我的台式机/平板电脑网站上。

我使用媒体查询来触发CSS事件来调整大小、更改颜色等，但当用户在移动网站上时，我想触发一组与在桌面/平板电脑网站上完全不同的事件jQuery事件。

这与调整大小事件无关（尽管我稍后需要处理），而是与设备的初始宽度有关。当我使用iPad和iPhone（6，如果重要的话）的视口下方的代码时，它们似乎都是980，这意味着我无法正确区分iPhone和iPad以触发不同的事件。

简而言之，下面的window.width（）变量在我的iPhone（横向或纵向）和iPad（横向或横向）上都返回980。有什么想法吗？为什么，以及我如何在下面进行优化，以更改为设备视口大小的实际宽度？

$(document).ready(function(){
$('#submenu').hide();
$('#mobileWebGallery').hide();
$('#webAbout').hide();
$('#webContact').hide();
var screen = $( window ).width();
if (screen > 667) {
    $('#mainmenu li:first').click(function(){
        $('#submenu').toggle('slow');
    });
}
else {
    $('#mainmenu li:first').click(function(){
        $('#mobileWebGallery').slideToggle('slow');
    });
    $('#aboutClick').click(function(){
        $('#webAbout').slideToggle('slow');
    });
    $('#contactClick').click(function(){
        $('#webContact').slideToggle('slow');
    });
}
});

Answer 1

在Head标记中添加此行，然后再次测试您的网页。jQuery会给你不同的宽度！

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

我找到了一个帮助我解决这个问题的脚本。它有助于识别移动网站，可以在这里找到：http://detectmobilebrowsers.com/