0

我想显示一个不同的 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');
    });
}
});
4

2 回答 2

0

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

于 2014-11-09T22:07:07.023 回答
0

在Head标签中添加这一行,然后再次测试您的网页。jQuery 会给你不同的宽度!

<meta name="viewport" content="width=device-width, initial-scale=1">
于 2014-11-09T18:30:01.767 回答