Question

如何将css仅应用于除ipad和移动浏览器之外的台式机和笔记本电脑浏览器？

@media only screen and (min-width: 742px) and (max-width: 769px){
  #element{
    display: none;
  }
}

Answer 1

如何保证用户不会在落入您所声明的视口宽度的桌面设备上查看您的网站/网络应用？你不能。

如果真的需要特定设备，特定于设备使用视口宽度，我猜你可以嗅探浏览器。

这是一个快速的jquery演示，使用：

navigator.userAgent

http://jsfiddle.net/y3ds0xpv/ - 注意：您需要在移动设备上查看桌面和移动设备之间的区别。

最终，如果您需要使用此方法，我建议您使用此方法：

http://detector.dmolsen.com/

Answer 2

你可以这样做（从here修改）：

@media not all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    #element{ display: none; } /* your css rules for ipad portrait */
}
@media not all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
    #element{ display: none; } /* your css rules for ipad landscape */
}

我确定你有充分的理由这样做，但我要小心。通常，您应该detect features，而不是设备。

Answer 3

@media screen and (min-width:1000px){
    #element{display:none;}
}

Answer 4

目标iPad（纵向和横向）的媒体查询将是：

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  { }

所以为了避免瞄准iPad，你可以改变它，让一切变得更大，一切都变小......

@media only screen and (max-device-width:768px),(min-device-width:1024px) { }

Answer 5

@media only screen and (max-width: 769px){
  #element{
    display: none;
  }
}

Answer 6

使用Foundation框架，您可以选择桌面，平板电脑或手机等所有屏幕尺寸。使用他们的“大”，“中”和“小”功能。这很容易使用。

使用Foundation，只需将hide-for-small和hide-for-medium类添加到仅在桌面上显示的div，即可解决您的问题。

Answer 7

最后，我只对台式机或笔记本电脑浏览器进行了工作媒体查询：

@media only screen and (min-width: 742px) and (max-width: 769px), 
not all and (min-width: 742px) and (max-width: 769px) (orientation: portrait){
   #element{
     display: none;
  }
}

很高兴地说，它运作得很好。

css仅适用于台式机或笔记本电脑，但不适用于ipad浏览器

7 个答案: