JS to target mobile only

Question

I'm building a responsive web page with a 3 column container that expand equally. To achieve this I'm using the following JS code:

jQuery(document).ready(function($){
    var inHeight = $("#wrapper").innerHeight();
    $("#wrapper .col").each(function(){
        $(this).height((inHeight+60)+"px");
        $(this).find('.content').height((inHeight)+"px");
    }); 
});

DEMO: http://jsfiddle.net/VTV6B/2/

Now what I need to do is to change the JS to target mobile devices or maybe remove it to make each column behave independently.

How can I disable this code if the user is on a mobile device?

possible duplicate of [What is the best way to detect a handheld device in jQuery?](http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-handheld-device-in-jquery) — Nesta, Feb 04 '14 at 15:13

score 2 · Accepted Answer · answered Feb 04 '14 at 13:52

2

To target mobile devices (or even better devices with a max-width of X pixels), you might use $(window).width().

But the actual issue with your code is the following: You try to make your website responsive using JS where you should use CSS media queries instead.

answered Feb 04 '14 at 13:52

2ndkauboy

9,006
2
27
62

Thanks Kau-Boy! Actually I'm using media queries. The only bit that needs JS are those 3 columns only. Regarding your code I'm not quite sure what to do with it and where to place it. Sorry I'm a noob in JS :'( – Nesta Feb 04 '14 at 14:26
Just use the return value of the function for your check for a mobile device: `if($(window).width()<600){ /* do something */ }` – 2ndkauboy Feb 04 '14 at 14:30
Ok so I placed your code bellow $(this).find('.content').height((inHeight)+"px"); Now I just need to know what to write between the curved brackets – Nesta Feb 04 '14 at 14:35
The code you just want to apply to mobile pages. So it might be the lines 3-6 of your example code. But I still would suggest do only use CSS for the responsiveness. – 2ndkauboy Feb 04 '14 at 22:51

score 2 · Answer 2 · answered Sep 12 '14 at 19:52

try something like this

         var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};
             if(isMobile.any()) { your code here }

JS to target mobile only

2 Answers2