desktop - 如何在没有浏览器嗅探的情况下区分台式机和平板电脑的 1000 像素屏幕尺寸？

Question

我在我的网站的桌面版本上使用了很多过渡、悬停和阴影效果。我需要为我的平板电脑版本摆脱它们，我认为我可以用媒体查询来做，但我的问题是当我使用 @media only screen 和 (min-width : 1224px) 之类的东西来定位桌面时，用户需要拥有他们的浏览器窗口最大化，或者他们获得了针对平板电脑的 css。因此，如果桌面用户浏览器的分辨率为 1000 像素，那么他们将获得与 Ipad 上的人相同的 css。现在我被告知浏览器嗅探是不可靠的，那么我还能如何区分使用 1000 像素桌面浏览器和 1000 像素平板设备的用户呢？

Answer 1

body {
  background-color: #bada55
}


/* Regular media queries for a smaller desktop */
@media only screen 
and (min-device-width : 768px) 
{
/* Add styles here */
} 



/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Add styles here */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Add styles here */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Add styles here */
} 

检查 jsbin 中的示例 - http://jsbin.com/uxipeh/1/以及此处的完整选项列表