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

一尘不染

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

css

我想为在iPhone和Android等手机上运行的Web浏览器更改网页CSS。我已经在CSS文件中尝试过类似的操作：

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

但这似乎没有任何作用，至少在iPhone上没有。如何编写CSS以在iPhone等上以不同方式工作，理想情况下不使用JavaScript？

阅读 373

2020-05-16

共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：

嗯，看起来很多新的移动设备都具有更高的分辨率（例如droidX为854x480）。有什么办法可以检测到这些吗？我不认为这些正在处理此查询。

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

因此，我认为它们必须是@ media-queries可以定位的Android设备，但是如上所述，我无法确定地说。

为了达到设备分辨率的目标，有一个示例：

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

2020-05-16