javascript - 响应式网站部分基于设备而不是屏幕分辨率

Question

我已经完成了我的响应式网站，并通过@media 查询设置了断点。我有几个基本断点

1. min-width: 1600px - 适用于电视和更大分辨率的屏幕(只是让整个页面居中并在两侧留白边，没有什么太大意义)

2. max-width: 1024px - 对于平板电脑来说，有很多变化，特别是因为平板电脑有大量的触摸屏，而台式机通常没有。它看起来完全不同。

3. max-width: 600px - 对于智能手机，也有很多变化，特别是基于将内容从两列或四列缩小为一列。

现在我发现这可能是个问题，因为现在有平板电脑在浏览器中运行，因为它们的分辨率宽度为 1280px，但也有显示器宽度为 1280px 的计算机，甚至更小，所以我不能为此更改断点值。

我当然不希望在平板电脑上使用桌面版，在计算机上使用平板电脑版，因为它们不是为了分辨率而创建的，而是为了平台而创建的。

我知道有一些叫做用户代理的东西，比如 WURFL，它似乎非常适合这个。但是有什么方法可以将 WURFL(平板电脑、台式机、smartpohne...)中的这个值与 css @media 查询连接起来。

例如，在 WURFL 中检测到设备是平板电脑，然后更改 CSS 文件中的断点值，使其显示平板电脑版本，而不是桌面版本？或者有没有其他方法可以得到与这个理论解决方案相似的结果？

Answer 1

无需识别设备，只需使用正确的媒体查询即可。

    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }