Jquery manipulate DOM on mobile only

Question

I have a bootstrap column system, however the way they are stacked, on mobile I would like to move one of the elements to appear before another. I believe this can be done with .append().

Is it possible to move the element I want with append() but only on mobile?

Thanks

maybe this will help https://www.fourfront.us/blog/jquery-window-width-and-media-queries — Chiller, Feb 21 '17 at 12:25

score 0 · Answer 1 · answered Feb 21 '17 at 12:35

0

You can do it by first checking whether your device's browser supports touch events (e.g. desktop does not, mobile does)

If it does you can execute the append and if not, nothing will happen.

var isMobile = (function() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
})();

if(isMobile) {
    your append action
}

answered Feb 21 '17 at 12:35

Vlatko Vlahek

1,839
15
20

But how can you tell if its Tablet or Mobile this way as they both support touch events no? – user1673498 Feb 21 '17 at 12:53
That's true. I would say that you can try to check for an aspect ratio of the device, because mobile phones usually have 16:9 or 16:10 aspect ratio. Tablets usually have different aspect ratios such as 4:3. For iPad, you can also do a check with the navigator.platform property. Here is the full list: http://stackoverflow.com/questions/19877924/what-is-the-list-of-possible-values-for-navigator-platform-as-of-today – Vlatko Vlahek Feb 21 '17 at 13:11

score 0 · Answer 2 · answered Feb 21 '17 at 13:03

http://detectmobilebrowsers.com/

Here you can get javascript/jquery file with the function based on regex for all the mobile/tablet devices. If you select some of them and build two separate functions for the mobile/tablet you could do regex for tablet and for the mobile only.

Hope it helps :)

Jquery manipulate DOM on mobile only

2 Answers2