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

【问题标题】：How to differentiate between 1000px screen size of desktops and tablets without browser sniffing?如何在没有浏览器嗅探的情况下区分台式机和平板电脑的 1000 像素屏幕尺寸？
【发布时间】：2012-08-15 06:01:48
【问题描述】：

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

【问题讨论】：

标签： desktop responsive-design media-queries tablet

【解决方案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/ 和 a full list of options here

【讨论】：