如何使用jquery区分桌面浏览器尺寸1024px和平板电脑尺寸1024px

How to distinguish between desktop browser dimension of 1024px from the tablet dimension 1024px using jquery

本文关键字：1024px 平板电脑 浏览器 桌面 何使用 jquery      更新时间：2023-11-18

现在这听起来可能很尴尬，但我面临的问题是，我有一些基于滚动的动画功能用于桌面浏览器，而其他动画用于tablet浏览器。现在我希望这些功能能在尺寸为1024px的桌面上运行。后来，我发现iPad也有1024px的尺寸，现在的问题是，我不希望在1024尺寸的桌面上运行的javascript动画功能在iPad上运行，因为iPad的布局和动画也不一样。如何使用jquery在Desktop 1024px和iPad 1024px之间创建区别？关于这个问题，你能给我什么建议？谢谢你的回复。如果你需要这个问题的模拟，请告诉我。抱歉英语不好。

正如上面提到的pwdst，最好使用特征检测，而不是用户代理嗅探，所以这里最好的做法是使用Modernizer.touch，就像他们说的为什么要重新发明轮子一样。让我们看看解决方案：

if(win.width >=1024 && Modernizr.touch == false) {
        /*This is for the desktop with a dimension of 1024px or above*/
        /*You can put any thing specific inside*/
}
  if(win.width == 1024 && Modernizr.touch == true) {
        /*This is for the tablet or touch interfaces with a dimension of 1024px*/
        /*You can put any thing specific inside*/
       /*there might be some mistake here but you get the idea !!*/
}

使用Modernizer JS非常简单。我希望这能回答问题，当然这是我的问题，我得到了我想要的，但可能会有更好的解决方案。

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (isMobile)
{
  $('head').append('<link rel="stylesheet" href="css/StyleSheet-ipad.css">'); //Append ipad specific stylesheet
}
相关文章：