Question

我想为手机上运行的网络浏览器（如iPhone和Android）更改我的网页CSS。我在CSS文件中尝试过类似的东西：

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

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

Answer 1

您可以使用@media queries：

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

此特定版本将定位到iPhone（以及屏幕为max-device-width 480px的任何其他设备。

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

<小时/> 来自@Colen的已编辑以回应评论：

嗯，看起来很多新的移动设备都有更高的分辨率（例如droid X是854x480）。有没有办法检测到那些？我不认为这些问题正在处理中。

我无法肯定地说，因为我无法访问这些设备，但另一个A List Apart Article: Responsive Web Design注意到：

值得庆幸的是，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 Candidate Recommendation for media queries。

Answer 2

从this site开始，还有一些其他媒体查询可用于定位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，但没有一个方便测试。）< / p>

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

Answer 3

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

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

Answer 4

不，iPhone或Android浏览器都不支持CSS @media handheld。

Answer 5

使用媒体查询“悬停”。

将其放入您的SCSS文件中：

// At this point the CSS would target screens above 990px - but only
// if they support hover (i.e. laptops, PC's etc).
$point-at-which-use-large-screens: (min-width 990px) (hover hover);

.some-class-you-want-to-target {

  // Some CSS to only apply to larger screens with mouse available.
  @include breakpoint($point-at-which-use-large-screens) {
    color: red;
  }
}

在SCSS上运行grunt之后，这将产生类似于：

的CSS

@media (min-width: 991px) and (hover: hover) {
  color:red;
}

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

5 个答案: