0

I'm using Modernizr, and I want to use a Google Maps when -no-touch is available. And use a static map when .touch is available. Like so:

.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 Markup is as simple as this:

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

Are there any reasons why this would not work?

Because on my desktop computer, this is working just fine. However on the iPhone I'm testing it with, it's not.

4

1 回答 1

1

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

建议同时设置触摸和鼠标事件，以适应混合设备 - 请参阅触摸和鼠标 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 代码。

于 2013-08-23T11:59:17.890 回答