css - 仅包含用于桌面浏览器的样式表

Question

我可以像这样包含不同分辨率的样式表:

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="min800.css" />

但我只想为桌面浏览器包含我的样式表，而不是 iPad、iOS、移动浏览器。

我该如何使用？

Answer 1

您可以使用像 Modernizr 这样的特征检测库检查触摸事件。

你不能简单地看一下用户代理吗？我知道它可以被覆盖，但它应该仍然工作得很好。查看Detect Mobile Browsers一些想法。

编辑

来自评论:

Hi! Thanks for the link detect mobile browsers. I'll use this. But this is only checking for mobile devices not tablets like iPad. So, how can I modify? I'm using php version.

iPad 用户代理如下所示:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

所以找到正则表达式中看起来像这样的部分:

ip(hone|od)

并将其更改为:

ip(hone|od|ad)

或者，您也可以通过如下自定义测试让 Modernizr 检测 iPad:

Modernizr.addTest('ipad', function () {
  return !!navigator.userAgent.match(/iPad/i);
});

或者您可以使用类似 Detectizr 的插件这会为您完成艰苦的工作。

希望对您有所帮助。