Detect phone/tablet/web client using javascript

Question

I am trying to detect if the end user is on a phone, a tablet or a pc

I have been Googling for a while, apparently there are no easy solution.

Well I guess I

Answer 1

Yes, you should not rely on resolution or orientation. But how about em-based media queries?

In order to read the results of your media query with javascript, you could try adding a media query to your css to add invisible content to your page:

@media all and (max-width: 45em) {
    body:after {
        content: 'smallscreen';
        display: none;
    }
}

Then read the content through javascript:

var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');

Then determine what you want to load:

if (size.indexOf('smallscreen') !=-1) {
    // Load some content for smaller screens.
}