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

【问题标题】：Reponsive website partially based on device instead of screen resolution响应式网站部分基于设备而不是屏幕分辨率
【发布时间】：2014-11-04 01:41:31
【问题描述】：

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

最小宽度：1600px - 适用于电视和更大分辨率的屏幕（仅将整个页面居中并在两侧留白边距，没什么太大意义）
max-width: 1024px - 对于平板电脑来说，有很多变化，特别是因为平板电脑有触摸屏，而台式机通常没有。看起来完全不一样。
max-width: 600px - 对于智能手机，也有很多基于将内容从两列或四列缩小为一列的变化。

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

我当然不希望平板电脑上的桌面版本和通勤上的平板电脑版本，因为它们不是为分辨率而创建的，而是为平台创建的。

我知道有些东西叫做用户代理，比如 WURFL，它似乎非常适合这个。但是有什么方法可以将来自 WURFL（平板电脑、桌面、smartpohne ...）的这个值与 css @media 查询联系起来。

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

【问题讨论】：

为什么不让用户选择他们使用的界面？
响应式设计的重点是你不是为设备设计的。您所描述的并不是真正的响应式设计。您应该停止对设备进行测试，而只使用媒体查询来确保网站在各个方面看起来都不错。
@RobG 我不确定你的意思。如果我购买分辨率更高的平板电脑，类似于台式机，我仍然希望有平板电脑版本，它更高，具有更大的链接和按钮，并且对于平板电脑用户来说更易于控制和阅读。
您应该通过媒体查询来控制它，而不是通过测试分辨率。
@moss 但是如果我不仅关注它看起来不错，而且关注不同平台的功能。平板电脑用户只有触摸屏，否则桌面用户有键盘和鼠标来控制网络。那是两种不同的想法。例如，在平板电脑版本中，您拥有完全不同的菜单，就像在桌面上一样。它只是为了在触摸屏上更舒适。

标签： javascript css responsive-design media-queries user-agent

【解决方案1】：

我想你正在寻找这个

检测移动设备的jQuery代码

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

【讨论】：

这并不是我真正想要的。在我的问题中，我提到我知道 WURFL.js，它告诉我它是平板电脑还是移动设备或其他任何东西。我需要更多了解如何以某种方式将它与 CSS 媒体查询联系起来。

【解决方案2】：

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

    @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) {

    }

【讨论】：