iPhone/Android浏览器支持CSS @media手持设备吗？

问题描述：

我想更改我的网页CSS，用于在手机上运行的网页浏览器，例如iPhone和Android。我在CSS文件中试过这样的东西：iPhone/Android浏览器支持CSS @media手持设备吗？

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

但它似乎没有任何效果，至少在iPhone上。我如何写我的CSS在iPhone等不同的工作，理想情况下不使用JavaScript？

大多数智能手机告诉CSS他们是 “屏幕” ..考虑到它们相对较大的尺寸和较高的分辨率，这种分类很有意义。 HTML/CSS标准的一些部分不是很有用，而CSS“手持式”就是其中之一。而不是CSS设备类，使用CSS Media Queries来检查实际尺寸（但即使这样做有点棘手，因为“逻辑视口”）。 – 2013-04-08 19:38:37

我认为，“掌上电脑”对于CSS来说是一个非常有效的轴 - 有时候你真的不关心具体的尺寸和DPI用户屏幕是什么 - 你做的*关心的是他们所做的交互。手持设备意味着包括屏幕在内的设备被握在手中，因此可以为您提供一些相当准确的假设，例如屏幕尺寸最大可能不大于9英寸，并且该设备旨在用于手臂长度或所以这些东西在为观众设计时很重要，我们必须停止所有的像素计数并进入更“通用”的高原 – amn 2016-04-17 10:54:03

答

可以使用@media queries：

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

这种特殊的版本将针对iPhone（或任何其他设备用的480pxmax-device-width屏幕

苹果的iPhone，虽然这是从内存，所以我不能完全确定它的准确性，所以选择忽略使用handheld或mobile样式表，因为它和其他iOS设备通过Safari可以或多或少地与桌面浏览器呈现CSS。对于其他设备我不确定，例如尽管A List Apart的文章（与上文相关）略微展示了一些文章，但它们的忠实度如何。

响应编辑发表评论，从@Colen：

嗯，它看起来像很多新的移动设备具有更高的分辨率（例如机器人X是854×480）。有没有什么方法可以检测到这些？我不认为这些查询正在处理这些问题。

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

幸运的是，W3C创建媒体查询作为CSS3规范的一部分，改善媒体类型的承诺。媒体查询使我们不仅可以定位某些设备类，还可以实际检查呈现我们工作的设备的物理特征。例如，随着最近移动WebKit的兴起，媒体查询成为一种流行的客户端技术，为iPhone，Android手机等提供量身定制的样式表。

所以我推测他们，Android设备，必须是目标能够通过@媒体查询，但是，正如指出的那样，我不能肯定地说。

要定位于设备的分辨率，存在的一个示例：

<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。

它应该是“max-device-width”（你有一个空间），但除此之外，这是伟大的。谢谢！ – Colen 2010-10-08 19:03:34

谢谢@Colen，错字现在修复=） – 2010-10-08 19:06:03

嗯，它看起来像很多新的移动设备具有更高的分辨率（例如，Droid X是854x480）有没有什么办法检测那些？我不认为那些正在处理这个查询 – Colen 2010-10-08 19:18:24

答

从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 
}

我能够成功地使用最大设备宽度媒体查询成功目标的Android手机，尽管我不得不将宽度调整到800像素而不是480像素。对于iPhone 4来说，-webkit-min-device-pixel-ratio的工作目标是iPhone4（最大设备宽度：480px没有，我认为这将针对iPhone3，但没有一个方便测试。）

我可以看到这个已经相当凌乱，但如果你有支持多种设备，并为每个人定制的CSS，只要他们支持媒体查询时出现，因为它是可以做到的，你必须要什么调整每个平台。是的，我会首先编写标准，以便尽可能多的CSS是可重复使用的，但是我们多次谈论如何根据正在使用的设备适当地设置替代布局。

答

@media handheld仅指那些古老的小原HTML手机从过去的几年中，其甚至无法真正显示网页。该EPUB，MOBI，平板电脑，社区厂商都强调说的 “H * CK不，我们不@media handheld设备！”因为他们正确地担心这会使他们永远地置身于“真实”网页的无人地带。

今天的具有非常高的分辨率的显示器小的设备，我们还没有一个很好的方式来告诉HTML如何以相对较低的分辨率与小型显示器具有极高的分辨率显示在大屏幕显示器的事情“正确”。作为一个认证的老屁，我的眼睛想提醒你，不是，答案不仅仅是使字体缩小2倍。

是否值得查看关于DPI/DPCM值的媒体查询，屏幕大小以cm /英寸和宽高比，而不是？ – 2013-04-19 09:47:25

答

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

答

看看使用媒体查询'悬停'。

在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运行咕噜等在这之后会产生CSS看起来像：

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

iPhone/Android浏览器支持CSS @media手持设备吗？

相关推荐