Question

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

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

我将包含一些桌面版的reslutions尺寸，我想在桌面视图和移动视图之间使用不同的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 */
}

或者，您可以使用Detect Mobile Browsers进行移动/平板电脑检测。

Answer 3

用户代理嗅探。

这不是一个好习惯，但是如果你嗅到服务器服务器端，并向客户端（电话，桌面）提供不同的内容（html / css / js），那就可以了。

更好的是，您应该问自己UI的设计功能，例如触摸，屏幕大小等。要检测到这一点，您可以使用CSS媒体查询和http://modernizr.com/

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

3 个答案: