Question

我在网站的桌面版本上使用了很多过渡，悬停和阴影效果。我需要为我的平板电脑版本摆脱它们，我认为我可以用媒体查询，但我的问题是当我使用像@media only屏幕和（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/和a full list of options here

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

1 个答案: