仅为iPad加载CSS文件

Question

3

我正在尝试为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上查看页面时，该样式表才会加载？

- John

我很难想象出一个好的理由。 - reisio

4个回答

1

你使用的是什么技术？如果你可以控制你正在渲染的内容（服务器端）到页面上，你可以检查请求中的USER-AGENT头。如果它包含字符串iPad，则渲染出CSS标签，否则不包括它。

如果你只是提供静态HTML，这种方法将不起作用。

- MattoTodd

0

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

我已经在所有项目中包含http://www.modernizr.com/，因此我能够使用组合。Modernizr会在触摸设备上添加一个.touch类。我建议尝试使用.touch来确定它不是PC，然后使用媒体查询来缩小移动设备的范围。

- Benjamin

我认为这可能是一个好答案，不确定 .touch 是否也适用于基于 Windows 8+ 触摸的系统。我的桌面电脑支持触摸。 - Suamere

随着越来越多的设备支持触摸屏，这种解决方案变得越来越不相关了。虽然并非所需的解决方案，但在某些情况下它可以像胶带一样发挥作用。 - Benjamin

0

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

还有这个：

- Glycerine

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- John · Accepted Answer

这对我来说效果更好。

@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) {

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