我想显示一个不同的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');
});
}
});
在Head标记中添加这一行,然后再次测试您的网页。jQuery会给你不同的宽度!
<meta name="viewport" content="width=device-width, initial-scale=1">