css - 媒体查询如何检测全高清智能手机？

Question

如果媒体查询检查设备上的像素数，它如何知道桌面全高清显示器和全高清智能手机之间的关系？

显然，两者的设计非常不同（css-wise）..

Answer 1

你可以通过像素密度来做到这一点。

@media only screen (-moz-min-device-pixel-ratio: 2), 
only screen and (-o-min-device-pixel-ratio: 2/1), 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {
 /*This will be high ppi smart phone*/
}

Answer 2

媒体查询不了解桌面浏览器与移动浏览器。最好的办法是使用 JS 来分析用户代理，或者执行一些功能测试。