根据屏幕大小-设备宽度问题触发不同的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">