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

Question

我想为在iPhone和Android等手机上运行的Web浏览器更改网页CSS。我已经在CSS文件中尝试过类似的操作：@media handheld {  body {    color: red;    }  }但这似乎没有任何作用，至少在iPhone上没有。如何编写CSS以在iPhone等上以不同方式工作，理想情况下不使用JavaScript？

Answer 1

在此站点上，还有一些其他媒体查询可用于定位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，但是很多时候我们都在讨论如何提供当今所使用设备的适当大小的替代布局。