做iPhone / Android的浏览器支持CSS @media掌机？ [英] Do iPhone / Android browsers support CSS @media handheld?

问题描述

我想改变我的网页CSS的手机上运行的Web浏览器，如iPhone和Android。我试着在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 。

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

苹果的iPhone，虽然这是从内存，所以我不能完全肯定它的准确度，选择了无视使用手持或<$ C的$ C>移动样式表，因为它和其他iOS设备，均能够呈现CSS或多或少与桌面浏览器相提并论的，通过Safari浏览器。对于其他的设备我不能确定，究竟他们是如何忠实的是，尽管列表除了文章（链接到以上）给出了一个简短的运行，通过一些。

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的是854×480）。有什么方法来检测那些？我不认为那些与此查询被处理。

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.

我不能肯定地说，因为我对这些设备没有进入，但是另一个一个名单除了文章：响应式网页设计指出：

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:

值得庆幸的是，在媒体查询作为CSS3规范的一部分W3C的，在媒体类型的前景改善。阿媒体查询允许我们针对不仅某些设备类，但实际检查该装置的渲染我们工作的物理特性。例如，在最近移动的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.

所以，我的 presume 他们，Android设备，必须在目标可以通过@媒体查询，但是，正如指出的那样，我不能肯定地说。

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屋！