CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ZubairAnwar
ZubairAnwar

Reputation: 83

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

Now this might sound awkward but the problem I am facing is that, I have some scroll based animation functions for desktop browser while other animation for tablet browsers. Now I want the functions to work on a desktop with dimension of 1024px. Later, I found that iPad also has a dimension of 1024px, now the thing is I dont want the javascript animation functions that are running in desktop with 1024 dimension, to run in the iPad as the layout for the iPad is quite different and animations are also different. How do I create that distinction between Desktop 1024px and iPad 1024 px using jquery ? What advice can you give me regarding this problem ? Thanks for your reply. If you need a simulation of the problem please let me know. Sorry for the bad english.

Upvotes: 0

Views: 649

Answers (2)

ZubairAnwar
ZubairAnwar

Reputation: 83

As pwdst mentioned above, its better to use feature detection rather than User Agent sniffing, so the best thing to do over here is to, use Modernizer.touch as they say why to reinvent the Wheel. so lets see the solution: 

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 !!*/
}

Quite easy and simple using Modernizer JS. I hope this answers the question, ofcourse its my question and I got what I wanted however there might some better solutions out there.

Upvotes: 1

softawareblog.com
softawareblog.com

Reputation: 990

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
}

Upvotes: 0

Related Questions