Javascript Modernizer和CSS-任何原因都不符合此规则'；你没有申请吗？

我使用的是Modernizer，我想在没有触摸功能的情况下使用谷歌地图。并在.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上，情况并非如此

Modernizer.touch测试仅指示浏览器是否支持触摸 事件，不一定反映触摸屏设备。对于 例如，Palm Pre/WebOS（触摸）手机不支持触摸事件 因此无法通过这项测试。此外，Chrome（桌面）还用于 关于它在这方面的支持，但这已经得到纠正。 Modernizer还通过媒体查询测试多点触控支持，其中 这是Firefox4在Windows7平板电脑上公开的方式。欲了解更多信息， 参见Modernizer触摸测试

建议同时设置触摸和鼠标事件，以 适合混合设备–请参见触摸和鼠标HTML5 文章

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

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

---

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

它在没有任何特定于Modernizer的类的情况下工作吗？如果是的话，你设置Modernizer的方式可能会有问题。看起来我遇到了缓存问题这样简单的问题。。我现在一直在学习使用隐姓埋名模式。我将一起研究设置触摸和鼠标事件。另外，你对modernizr.touch的评论并不一定反映触摸屏设备，modernizr难道没有这些检查吗？例如您的示例代码？Modernizer不会告诉您有关该设备的任何信息。。。只有浏览器。有些设备的触摸屏运行的浏览器不支持触摸事件；有些设备没有运行支持触摸事件的浏览器的触摸屏。