JQuery 区分大小不同但 $(window).width() 相同的智能手机、平板电脑或计算机

Question

我遇到了一个问题，我想解决这个问题，试图区分不同的设备。

重点是我有 3 种不同的设备来测试我的代码：

- 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

我用手测量了宽度和高度的厘米数，并在每个设备的规格中在互联网上搜索了屏幕的分辨率（以 px 为单位）。

但是浏览器中的所有 3 个设备都具有相同的像素宽度（我从 "alert($(window).width());" 获得的垂直方向为 980 像素）。所以我无法区分智能手机和其他设备。

显然这三个设备的尺寸明显不同，我想对每个设备应用不同的 css 规则，但我找不到解决方案。

知道我做错了什么吗？

Answer 1

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

    $window.innerWidth

或者试试这个

    $window.screen.width

JQuery 区分大小不同但 $(window).width() 相同的智能手机、平板电脑或计算机

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

jquery

width

device-orientation