0

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.

ZubairAnwar
  • 83
  • 2
  • 12
  • 1
    you could detect if is a mobile device with javascript [What is the best way to detect a mobile device in jQuery?][1] [1]: http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery and you might apply a css style based on the device – Vladu Ionut Feb 15 '15 at 11:43
  • 1
    if layout is diffferent how is that determined? Why can't you just check for the main class on layout? – charlietfl Feb 15 '15 at 12:41
  • @charlietfl you mean detect the specified mediaquery using jquery/Javascript ? – ZubairAnwar Feb 15 '15 at 12:50
  • 1
    no, you stated that ipad layout is different, how is that determined – charlietfl Feb 15 '15 at 12:54
  • 1
    If you can ignore user agent strings as these, by definition, can only detect devices known to the author **at the time of writing them**. The Mobile World Congress is just a matter of weeks away, and multiple new devices may be launched then that we have no knowledge of now. If the layout and animation designs are different based on touch/ non-capabilities - then don't detect screen size, or a user agent string which can be changed by the device in any case, **detect the touch capabilities**. See https://msdn.microsoft.com/en-gb/library/ie/hh273397.aspx – pwdst Feb 15 '15 at 13:22
  • 1
    If you can use feature detection then this is more future-proofed, new devices with the capability are automatically listed rather than having to manually edit the user agent string regular expression. It is also more inclusive - most developers will know enough to include Android as well as iOS devices now given the enormous market share of Android - but what about Firefox and Opera browsers on Android. Do you detect the legacy Android browser as well as the newer Chrome? What about browsers that only have market share in other markets. With feature detection, if it's supported, it's covered. – pwdst Feb 15 '15 at 13:30
  • @charlietfl good question, see its simple media query stuff, that when the dimension changes the layout of hte webpage changes, i think you are saying that I add the classes that cause the change in layout, using jquery after detecting the user agent. Correct ? – ZubairAnwar Feb 15 '15 at 15:27
  • all I am saying is if the new layout has been triggered you should be able to detect it by some feature of that layout – charlietfl Feb 15 '15 at 15:28
  • @pwdst so you are saying that detecting the touch capabilities is the best way to go in the long run ? Great idea need to check it out. – ZubairAnwar Feb 15 '15 at 15:29
  • what are your thoughts on using $(Window).resize() in this case ? – ZubairAnwar Feb 15 '15 at 15:30
  • @charlietfl alriiight, hmm.... need to check that out. – ZubairAnwar Feb 15 '15 at 15:40

2 Answers2

1

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.

ZubairAnwar
  • 83
  • 2
  • 12
0
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
}
softawareblog.com
  • 972
  • 9
  • 21
  • Thanks for the reply, User agent sniffing is decent, but I think its better to use, Modernizr to detect whether the interface supports touch or not, and then based on that do the changes to the CSS or javascript. – ZubairAnwar Feb 16 '15 at 17:16