javascript - Modernizr 和 CSS - 不应用此规则的任何原因？

Question

我正在使用 Modernizr，并且我想在 -no-touch 可用时使用 Google map 。并在 .touch 可用时使用静态 map 。像这样:

.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

The Modernizr.touch test only indicates if the browser supports touch events, which does not necessarily reflect a touchscreen device. For example, Palm Pre / WebOS (touch) phones do not support touch events and thus fail this test. Additionally, Chrome (desktop) used to lie about its support on this, but that has since been rectified. Modernizr also tests for Multitouch Support via a media query, which is how Firefox 4 exposes that for Windows 7 tablets. For more info, see the Modernizr touch tests.

It's recommended to set both touch and mouse events together, to cater for hybrid devices – see the Touch And Mouse HTML5 Rocks article.

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

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

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

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