Question

我的响应式网站完成了使用@media查询设置的断点。我有几个基本的断点

min-width：1600px - 适用于电视和更高分辨率的屏幕（只需将整个页面居中并在边上留下白边，没有太大意义）
max-width：1024px - 对于平板电脑，有很多变化，特别是因为平板电脑具有粗略的触摸屏，而桌面通常没有。它看起来很不一样。
max-width：600px - 对于smarphones，特别是在将内容从两个或四个列缩小为一个时，也会有很多变化。

现在我发现这可能是一个问题，因为现在平板电脑在浏览器中起作用，因为它们具有分辨率宽度，例如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) {

    }

Answer 2

我认为你正在寻找这个

用于检测移动设备的jQuery代码

http://www.webtrainingcentre.com/jquery/scripts/jquery-code-to-detect-mobile-devices/

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

2 个答案: