iPhone / Android浏览器支持CSS @媒体手持吗？
iPhone / Android浏览器支持CSS @媒体手持吗？
提问于 2010-10-09 02:36:05
我想改变我的网页CSS的网页浏览器运行在手机上，如iPhone和安卓。我在CSS文件中尝试了类似以下内容：
@media handheld {
body {
color: red;
}
}但它似乎没有任何影响，至少在iPhone上是这样。我如何编写我的CSS在iPhone等平台上以不同的方式工作，最好不使用javascript？
回答 3
Stack Overflow用户
发布于 2011-01-06 05:42:21
来自this site的其他一些媒体查询在针对iPhone/安卓手机时也很有用：
// 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为目标(max-device-width: 480px没有，我假设它将以iPhone3为目标，但没有现成的可以测试)。
我可以看到这变得相当混乱，但如果你必须支持大量的设备，并为每个设备都有自定义的CSS，只要它们支持媒体查询，似乎可以做你必须调整每个平台的事情。是的，我会首先按照标准编写代码，这样就可以重复使用尽可能多的CSS，但我们很多时候都在谈论呈现适合所用设备大小的替代布局。
Stack Overflow用户
发布于 2017-02-02 22:25:30
不支持，iPhone和Android浏览器都不支持CSS @media handheld。
Stack Overflow用户
发布于 2017-10-03 21:59:48
看看使用媒体查询'hover‘。
将以下内容放入您的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 etc之后，这将生成如下所示的CSS：
@media (min-width: 991px) and (hover: hover) {
color:red;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3893342
复制相关文章
相似问题