HTML5: Detecting if you're on mobile or pc wit

问题:

This question already has an answer here:

• What is the best way to detect a mobile device in jQuery? 50 answers

What javascript code can I use to detect if users are on a mobile or pc/mac browser in HTML5?

回答1:

I was looking into this a few years back. In short, you can't do this with 100% reliability. There seem to be 2 approaches commonly used to provide a 'best-guess':

1. User Agent Detection This is where you check what the client is claiming to be. e.g.

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    // is mobile..
}

It's not perfect, since I believe it is fairly easy for this property to be altered accidentally or otherwise. Plus it is highly unlikely that this list will still be accurate in 2 years' / 2 weeks' / 2 days' time!

2. Using Client Capabilities As you can imagine, a more pragmatic approach - allows you to cater to the known physical capability of the client. e.g.

if( screen.width <= 480 ) {     
    // is mobile.. 
}

However this is not ideal either, since higher and higher pixel densities in modern devices give you a misleading result: appearing that you have more 'room' than you actually do. Plus different browsers may expose their capabilities through different means.

If anyone has any better ideas to robustly discern between desktop and device, please comment! :)