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

【问题标题】：css only for desktop or laptops but not for ipad browserscss 仅适用于台式机或笔记本电脑，但不适用于 ipad 浏览器
【发布时间】：2014-11-21 06:42:55
【问题描述】：

如何仅将 css 应用于台式机和笔记本电脑浏览器，不包括 ipad 和移动浏览器？

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

【问题讨论】：

习惯Responsive Design，使用Bootstrap。
如果我没看错你的问题，我想你甚至不需要做最小宽度和最大宽度。如果您只想定位笔记本电脑台式机，您可以使用 @media screen 和 (min-width: 1024px) {...} 并将所有样式放在那里。这将针对比平板电脑更大的任何东西。不过，我同意 Stefan 的观点。开始使用响应式设计。
如果它真的是要在桌面和移动设备上显示不同的东西，那么你不应该依赖 @media 查询，原因很简单，从长远来看它是不可维护的（设备正在发展和屏幕尺寸也是如此）。在这种情况下，最好的解决方案是使用特征检测库（@tweedman23 为您提供了最好的设备检测库）。但是，如果它只是关于响应式设计（根据屏幕大小调整 css），那么@media 查询是完美的。

标签： css

【解决方案1】：

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

【讨论】：

它也适用于ipad。
我需要在742px和769px之间应用css

【解决方案2】：

针对 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) { }

【讨论】：

感谢您的回答，但它没有用。它也适用于 ipad。
如果你只想做一个 display:none 风格.. 为什么不只是做 display:none 在你的一般风格和目标 ipad 并应用 display:block 或任何你可见的显示风格。
我想确保我的代码只能在 742px 和 769px 之间工作，不包括 ipad。

【解决方案3】：

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

【讨论】：

【解决方案4】：

最后，我得到了仅适用于台式机或笔记本电脑浏览器的工作媒体查询：

@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;
  }
}

很高兴地说，它运行良好。

【讨论】：

您是如何得出这些数字 742、769 的？我仍然认为您应该考虑反转逻辑，它会简单得多。
您好，如果您的这个回答解决了您的问题，请采纳并不要在标题中加上“[已解决]”；这只是噪音。有 2 天的等待时间，直到您可以将其标记为自我接受，所以我想这就是您尚未检查它的原因 :)
我的桌面宽度超过 769 像素。这有点不对劲。
这个解决方案看起来不像真正的解决方案。
@slebetman 规则不超过 769 像素，但如果最大宽度为 769 像素。所以，检查一下 742px 和 769px 之间的这个事实。

【解决方案5】：

您如何保证用户不会在符合您规定的视口宽度的桌面设备上查看您的网站/网络应用程序？你不能。

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

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

navigator.userAgent

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

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

http://detector.dmolsen.com/

【讨论】：

【解决方案6】：

你总是可以这样做（修改自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，而不是设备。

【讨论】：

【解决方案7】：

使用Foundation 框架，您将拥有适用于所有屏幕尺寸的选项，无论是台式机、平板电脑还是手机。使用它们的“大”、“中”和“小”功能。它相当容易使用。

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

【讨论】：