iPhone/Android浏览器是否支持CSS @media掌上电脑？

Question

我想更改我的网页CSS,用于手机上运行的网络浏览器,如iPhone和Android.我在CSS文件中尝试过类似的东西:

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

但它似乎没有任何影响,至少在iPhone上.如何编写我的CSS以在iPhone等上以不同的方式工作,理想情况下不使用javascript？

Answer 1

您可以使用@media查询:

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

这种特殊的版本将针对iPhone(并与屏幕的任何其他设备max-device-width的480px.

苹果,对于iPhone,虽然这是来自内存所以我不能完全确定它的准确性,选择忽略使用handheld或mobile样式表,因为它和其他iOS设备能够或多或少地渲染css与桌面浏览器相同,通过Safari.对于其他设备,我不确定,确切地说,它们是多么忠实,尽管A List Apart文章(链接到上面)给出了一些简要介绍.

编辑回应置评,从@Colen:

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

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

值得庆幸的是,W3C创建了媒体查询作为CSS3规范的一部分,改进了媒体类型的承诺.媒体查询允许我们不仅要定位某些设备类,而且要实际检查设备的物理特性以呈现我们的工作.例如,随着最近移动WebKit的兴起,媒体查询成为一种流行的客户端技术,为iPhone,Android手机及其类似产品提供量身定制的样式表.

因此,我认为他们的Android设备必须能够被@ media-queries定位,但如上所述,我无法肯定地说.

要定位设备分辨率,有一个示例:

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

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

Answer 2

在此网站上,还有一些其他媒体查询可用于定位iPhone/Android手机:

    // target mobile devices
@media only screen and (max-device-width: 480px) {
    body { max-width: 100%; }
}

// recent Webkit-specific media query to target the iPhone 4's high-resolution Retina display
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    // CSS goes here
}

// should technically achieve a similar result to the above query,
// targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi)
@media only screen and (min-resolution: 300dpi) {
    // CSS goes here
}

我能够成功使用max-device-width媒体查询成功定位Android手机,虽然我不得不将宽度调整到800px而不是列出的480.对于iPhone 4,-webkit-min-device-pixel-ratio适用于iPhone4(最大设备宽度:480px没有,我认为它将针对iPhone3,但没有一个方便测试.)

我可以看到这变得非常混乱,但如果你必须支持多个设备并为每个设备都有自定义CSS,只要它们支持媒体查询就会出现,因为它可以做你必须做的调整每个平台.是的,我会首先编写标准代码,以便尽可能多地恢复CSS,但很多时候我们都在讨论如何使用适合所用设备的替代布局.

Answer 3

@media handheld仅指过去几年甚至无法真正显示网页的那些古老的小型proto-html手机.ePUB,MOBI,平板电脑,供应商社区都强调"H*ck no,我们不是 @media handheld设备!" 因为他们正确地担心这会让他们永远落在一个无人区的"真实"网页之下.

对于今天具有高分辨率显示器的小型设备,我们仍然没有一种好的方法来告诉HTML如何在分辨率相对较低的大型显示器上"正确"显示"高分辨率的小型显示器".而作为一个经过认证的老屁,我的眼睛想提醒你,不,答案不仅仅是让包括字体2X在内的所有东西变小.

Answer 4

不,iPhone或Android浏览器都不支持CSS @media handheld.