Question

我正在使用Modernizr，我想在没有触摸的情况下使用谷歌地图。当.touch可用时使用静态地图。像这样：

.no-touch #map-canvas {
    height: 400px;
}

.touch #map-canvas-static {
    height: 300px;
    background-image: url('http://maps.googleapis.com/maps/api/staticmap?center=63.439016,10.416856&zoom=15&format=png&sensor=false&size=1583x1583&maptype=roadmap&style=element:geometry|saturation:-71&style=feature:water|saturation:-2|color:0x768080|lightness:34&markers=63.439114,10.415564&&scale=1');
    background-position: center;
}

HTML标记就像这样简单：

<section id="map">
    <div id="map-canvas-static"></div>
    <div id="map-canvas"></div>
</section>

有什么理由说这不起作用吗？

因为在我的台式电脑上，这工作得很好。然而，在iPhone上，我正在测试它，但事实并非如此。

Answer 1

Modernizr.touch测试仅指示浏览器是否支持触摸   事件，不一定反映触摸屏设备。对于   例如，Palm Pre / WebOS（触摸）手机不支持触摸事件   因此未通过此测试。此外，Chrome（桌面）曾经撒谎   关于它的支持，但此后已得到纠正。   Modernizr还通过媒体查询测试多点触控支持   Firefox 4是如何为Windows 7平板电脑公开的。有关更多信息，   看看Modernizr触摸测试。

建议将touch 和鼠标事件设置为   适合混合设备 - 请参阅Touch和Mouse HTML5 Rocks   制品

http://modernizr.com/docs/#touch

在我看来，您可以使用简单的JavaScript来检测移动设备，例如：

    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
      $(body).addClass('.touch')
    }

然后你可以使用你的CSS代码。

Modernizr和CSS - 这个规则没有被应用的原因吗？

1 个答案: