iPhone/Android 浏览器是否支持 CSS @media 手持设备? [英] Do iPhone / Android browsers support CSS @media handheld?

问题描述

我想为在手机(如 iPhone 和 Android)上运行的网络浏览器更改我的网页 CSS.我在 CSS 文件中尝试过类似的方法:

I want to change my web page CSS for web browsers running on cell phones, like the iPhone and Android. I've tried something like this in the CSS file:

@media handheld {
  body {
    color: red;
    }
  }

但它似乎没有任何影响，至少在 iPhone 上是这样.我怎样才能编写我的 CSS 以在 iPhone 等上以不同的方式工作，理想情况下不使用 javascript?

But it doesn't seem to have any effect, at least on the iPhone. How can I write my CSS to work differently on the iPhone etc, ideally without using javascript?

推荐答案

您可以使用 @media 查询:

<link rel="stylesheet" href="path/to/iphone.css" media="only screen and (max-device-width:480px)"/>

此特定版本将针对 iPhone(以及任何其他屏幕为 480px 的 max-device-width 的设备.

This particular version will target the iPhone (and any other device with a screen of max-device-width of 480px.

Apple，对于 iPhone，虽然这是凭记忆，所以我不能完全确定其准确性，但选择忽略 handheld 或 mobile 样式表的使用，因为它和其他 iOS 设备能够通过 Safari 或多或少地与桌面浏览器一样渲染 css.对于其他设备，我不确定它们到底有多忠实，尽管 A List Apart 文章(链接到上面)简要介绍了一些.

Apple, for the iPhone, though this is from memory so I can't be entirely sure of its accuracy, chose to disregard the use of handheld or mobile stylesheets, since it, and other iOS devices, were capable of rendering css more or less on a par with desktop browsers, via Safari. For other devices I'm unsure, exactly, how faithful they are, though the A List Apart article (linked-to above) gives a brief run-through of some.

---

编辑回应评论，来自@Colen:

---

Edited in response to comment, from @Colen:

嗯，看起来很多新的移动设备都有更高的分辨率(例如 droid X 是 854x480).有没有办法检测这些?我认为这个查询不会处理这些问题.

Hmm, it looks like a lot of new mobile devices have higher resolutions (e.g. droid X is 854x480). Is there any way to detect those? I don't think those are being handled with this query.

我无法确定，因为我无法访问这些设备，但是另一个 A List Apart 文章:响应式网页设计 指出:

I'm unable to say for certain, since I've no access to those devices, however another A List Apart Article: Responsive Web Design notes that:

幸运的是，W3C 创建了媒体查询作为 CSS3 规范的一部分，改进了媒体类型的承诺.媒体查询使我们不仅可以针对某些设备类，还可以实际检查呈现我们工作的设备的物理特性.例如，随着最近移动 WebKit 的兴起，媒体查询成为一种流行的客户端技术，用于向 iPhone、Android 手机等提供定制的样式表.

Thankfully, the W3C created media queries as part of the CSS3 specification, improving upon the promise of media types. A media query allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work. For example, following the recent rise of mobile WebKit, media queries became a popular client-side technique for delivering a tailored style sheet to the iPhone, Android phones, and their ilk.

所以我假设他们，Android 设备，必须能够被@media-queries 定位，但是，如上所述，我无法肯定地说.

So I presume that they, Android devices, must be target-able by @media-queries, but, as noted, I'm unable to say with any certainty.

为了定位设备分辨率，有一个例子:

To target device-resolution, there is an example of:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" />

进一步阅读:媒体查询的 W3 候选推荐.

这篇关于iPhone/Android 浏览器是否支持 CSS @media 手持设备?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！