Using CSS or JS to identify device type

Question

So I'm afraid to say I'm a newbie in need of help. I am in charge of a school website and it has a prebuilt block which can be used to display certain content depending on the device. However, it cannot tell the difference between android tablets and phones and as such always shows the mobile version.

Is there a way I could set this up manually to identify the user device?

Many thanks in advance! Rob

You should show effort in your posts, show us what you've tried thus far... see: http://stackoverflow.com/help/how-to-ask — Gerwin, Jan 14 '15 at 13:57
possible duplicate of [How to detect a mobile device with javascript?](http://stackoverflow.com/questions/6666907/how-to-detect-a-mobile-device-with-javascript) — Michał Kutra, Jan 14 '15 at 13:58
Why does it matter if the device is a tablet or a phone? Do you need to display different content if the screen is a certain size (there are very small tablets and very large phones out there). Does it matter if the device is using 3G/4G instead of Wi-fi? (Tables and phones exist that can use both). Does it matter if the device can actually make phone calls? You should test for the features you care about and not try to shoehorn things into classes of device. — Quentin, Jan 14 '15 at 14:00

score 1 · Answer 1 · edited May 23 '17 at 10:33

1

With CSS You can simply base on screen-width and media-queries (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries). Take a look how, for example Twitter Bootstrap is developed.

And with JS there is a lot to say about this, but most You can find for example in this topic: How to detect a mobile device with JavaScript?

I ussualy try to keep this information in my JS App namespace with COnfigs, for example (with Twig)

var App = {    
    'CONFIG' : {
        'IS_TABLET' : {% if isTablet() %}true{% else %}false{% endif %},
        'IS_PHONE' : {% if isMobile() %}true{% else %}false{% endif %}
    }    
}

Where isTablet() and isMobile() are from backend where is possible to detect it with some useful Bundles (in Symfony2 case).

But the best what You can do it is making one solution which will be work across different devices / browsers / display sizes etc. Rather than hack your solutions, try to make it universal

edited May 23 '17 at 10:33

Community

1
1

answered Jan 14 '15 at 13:57

Michał Kutra

1,202
8
21

I thought CSS would offer a pretty restricted range of tools but this JS looks promising. I might have to use a combination to identify only tablets. Thanks for your help! Will give this a go and get back to you. – Rob Jeffrey Jan 14 '15 at 13:59
Quick update, apologies for the lack of detail in my post. I will correct this in any future posts. I have managed to set up a button which will respond 'true' or 'false' depending on if the device is an android. Trying to now detect a tablet or a phone. I am trying to get my head around your IS_TABLET code but, as a JS beginner, stuggling to get my head around it. many thanks to all who are helping out! – Rob Jeffrey Jan 14 '15 at 14:15

score 0 · Answer 2 · answered Jan 14 '15 at 14:08

in JS you can try the following,

var isMobile = { Android: function() { return /Android/i.test(navigator.userAgent); }, BlackBerry: function() { return /BlackBerry/i.test(navigator.userAgent); }, iOS: function() { return /iPhone|iPad|iPod/i.test(navigator.userAgent); }, Windows: function() { return /IEMobile/i.test(navigator.userAgent); }, any: function() { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows()); } };

the above code will help you know the OS version, to get the device difference, this blog might help https://solutionmedia.net/blog/2013/06/13/easily-detect-mobile-or-tablet-devices-jquery — Matin, Jan 14 '15 at 14:18

score 0 · Answer 3 · answered Nov 02 '18 at 03:28

You can simply find whether the device is mobile, tablet or desktop from following js function.

<html>
<script>
 function getDeviceType() {
    if(navigator.userAgent.match(/mobile/i)) {
        return 'Mobile';
    } else if (navigator.userAgent.match(/iPad|Android|Touch/i)) {
        return 'Tablet';
    } else {
        return 'Desktop';
    }
}

window.alert(getDeviceType())
</script>

</html>

Using CSS or JS to identify device type

3 Answers3