如何在没有浏览器嗅探的情况下区分台式机和平板电脑的1000px屏幕大小？

Question

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

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/和选项的完整列表在这里