JQuery distinct between smartphones, tablet or computers with different sizes but the same $(window).width()

Question

I got a problem I would like to solve trying to differentiate between different devices.

The point is I have 3 different devices to test my code:

- Moto G (3rd gen) (Smartphone):
    - Width screen: 6'3 cm
    - Height screen: 11 cm
    - Resolution: 720 x 1280
- Huawei T1-701w (Small tablet):
    - Width screen: 9 cm and
    - Height screen: 15'3 cm
    - Resolution: 600 x 1200
- Samsung sm-t580 (Big Tablet):
    - Width screen: 13'8 cm
    - Height screen : 21'9 cm
    - Resolution: 800 x 1280

I measured with my hands the cm of width and height and searched it in internet in the specifications from each device the resolution in px of the screen.

But all 3 devices in the browsers have the same width in pixels (980 px in the vertical orientation that I get from "alert($(window).width());"). So I can't distinct between an smartphone and the rest of devices.

Obviously the three devices have a clearly different size and I would like to apply different rules of css for each one but I can't find a solution.

Any idea about what I'm doing wrong?

Answer 1

You will have to use innerWidth instead of width property for that purpose.

    $window.innerWidth 

or try this

    $window.screen.width