Question

我想显示不同的div，具体取决于用户是否位于我的移动网站上，而不是桌面/平板电脑网站。

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

这与resize事件无关（虽然我需要稍后解决），而是设备的初始宽度。似乎当我使用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/

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

2 个答案: