iPhone / Android浏览器支持CSS @media掌上电脑吗？
我想改变我的网页CSS浏览器运行在手机上，如iPhone和Android。 我在CSS文件中试过这样的东西：
@media handheld { body { color: red; } } 但是至less在iPhone上，它似乎没有任何效果。 我怎样才能写我的CSS在iPhone等不同的工作，理想情况下，不使用JavaScript？
您可以使用@media查询 ：
<link rel="stylesheet" href="path/to/iphone.css" media="only screen and (max-device-width:480px)"/>
这个特定的版本将针对iPhone（和任何其他设备的max-device-width为480px 。
苹果，对于iPhone来说，虽然这是来自内存，所以我不能完全确定它的准确性，所以select忽略handheld或mobile样式表的使用，因为它和其他iOS设备能够或多或less地呈现CSS与桌面浏览器相当，通过Safari。 对于其他设备，我不确定，确切地说，它们是多么忠诚，虽然A List Apart文章（与上面的链接）给出了一些短暂的运行。
@Colen回应评论编辑 ：
嗯，它看起来像很多新的移动设备有更高的分辨率（例如，Droid X是854×480）。 有没有什么办法来检测这些？ 我不认为这些查询正在处理。
我无法肯定地说，因为我没有访问这些设备，但是另一个列表除了文章：响应式网页devise注意到：
值得庆幸的是，W3C将媒体查询作为CSS3规范的一部分，改进了媒体types的承诺。 媒体查询使我们不仅可以定位某些设备类别，还可以实际检查呈现我们工作的设备的物理特征。 例如，随着最近移动WebKit的兴起，媒体查询成为一种stream行的客户端技术，为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候选推荐媒体查询 。
在这个网站上还有一些其他的媒体查询可以用来定位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 }
我能够成功地使用最大设备宽度媒体查询成功定位Android手机，但我不得不调整宽度高达800px，而不是480列出。 对于iPhone 4，-webkit-min-device-pixel-ratio的工作目标是iPhone4（最大设备宽度：480px没有，我认为这将针对iPhone3，但没有一个方便testing。）
我可以看到这变得相当混乱，但如果你必须支持多种设备，并为他们每个人都有自定义的CSS，只要他们支持媒体查询，它可能会做你必须调整每个平台。 是的，我会首先编写标准，以便尽可能多的CSS是可重复使用的，但是很多时候我们正在讨论如何根据所使用的设备来适当地设置替代布局。
@media handheld只是指那些过去几年甚至连真正无法显示网页的古老微型proto-html手机。 ePUB，MOBI，平板电脑，供应商社区都强调说：“我们不是 @media handheld设备！” 因为他们正确地担心这会把他们永久地置于一个无人区域，服从“真实”的网页。
对于具有高分辨率显示器的今天的小型设备，我们仍然没有一个很好的方式来告诉HTML如何在分辨率相对较低的大显示器上“正确”显示事物，而分辨率却非常高的小显示器。 作为一个authentication的老屁，我的眼睛想提醒你，不，答案不仅仅是使所有的字体变小2倍。
不，iPhone或Android浏览器都不支持CSS @media handheld 。
看看使用媒体查询'hover'。
把它放在你的SCSS文件中：
// At this point the CSS would target screens above 990px - but only // if they support hover (ie 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; }
