css - css 媒体查询：桌面和最新智能手机分辨率之间的冲突

Question

由于新手机有一个非常大的分辨率显示屏（例如：1280），我想知道什么是最聪明的方式来做一个 CSS 媒体查询，专门用于 1280 的手机。我遇到的问题是，如果我这样做：

@media only screen and (min-width:1136px) and (max-width:1280px)

我将包括一些桌面分辨率大小，并且我希望在桌面视图和移动视图之间有不同的 UI。

有什么好的做法/解决方案吗？

非常感谢 ！

Answer 1

对于移动设备，只需尝试检查min-device-width和/或max-device-width.

另一种可能性是检查您定位的设备的像素比

Answer 2

定位智能手机等设备的一个好方法是使用min-device-width和max-device-width，例如

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Smartphone queries here */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* iPad queries here */
}

或者，您可以使用检测移动浏览器进行移动/平板电脑检测。

Answer 3

用户代理嗅探。

这不是一个好的做法，但是如果您在服务器端嗅探用户代理并向客户端（电话、桌面）提供不同的内容（html/css/js），它就可以工作。

更好的是，你应该问问自己你的 UI 是为哪些功能而设计的，比如触摸、屏幕尺寸等。要检测到这一点，你可以使用 CSS 媒体查询和http://modernizr.com/