仅为 ipad 加载 css 文件答案

【问题标题】：Load css file for ipad only仅为 ipad 加载 css 文件
【发布时间】：2011-02-02 22:23:27
【问题描述】：

我正在尝试仅为 ipad 加载 css 文件。我试过这个：

<link href="/css/ipad.css" rel="stylesheet" media="all and (max-device-width: 1024px)" type="text/css">

它适用于 iPad，但如果我在桌面上将分辨率降低到 1024 x 768 并在 Firefox 中查看该站点，则 ipad 样式表也会加载。所以我尝试了：

<link href="/css/ipad.css" rel="stylesheet" media="all and (max-device-width: 1024px) and (orientation:landscape)" type="text/css">

但仍然是同样的问题。如何确保仅当他们在 iPad 上查看页面时才加载此样式表？

【问题讨论】：

【解决方案1】：

来自： http://css-tricks.com/snippets/css/ipad-specific-css/

这对我来说效果更好。

@media only screen and (device-width: 768px) {

/* 对于一般的 iPad 布局 */ }

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {

/* 仅适用于纵向布局 */ }

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {

/* 仅适用于横向布局 */ }

【讨论】：

不知道这是如何获得 3 票的。确切的问题与媒体屏幕尺寸有关，因为它不是特定于 iPad 的，并且如果桌面或窗口尺寸属于相同的媒体声明，则会扰乱桌面查看。对于这个特定的问题，马托有正确的答案。

【解决方案2】：

您使用的是什么技术？如果您可以控制向页面呈现的内容（服务器端），则可以检查请求中的 USER-AGENT 标头。如果它包含字符串 iPad，则渲染出 css 标签，如果不包含，则不包含它。

如果您只是交付静态 html，这将不起作用。

【讨论】：

【解决方案3】：

这个问题可能会有所帮助：

还有这个：

【讨论】：

【解决方案4】：

由于许多不同的屏幕尺寸和分辨率，我不能只使用媒体查询来解决这个问题。

我已经在我的所有项目中包含了http://www.modernizr.com/，所以我可以使用一个组合。 Modernizr 将在支持触摸的设备上添加一类 .touch。我建议尝试使用 .touch 来确定它不是 PC，然后使用媒体查询来缩小它是什么移动设备。

【讨论】：