javascript - 移动网站上ImageMap的替代方法

我有以下问题。我正在用jQuery Mobile写一个网站（数据来自drupal cms）。

目前，我最大的问题是，我有一张图片，用户应该可以触摸该图片以获取其他信息。问题是，旋转设备时图像不应旋转。

目前，我的解决方案是将设备旋转到同一图像但旋转90 *时更改图像。对于用户可以触摸的点，我将div与自定义触摸事件一起使用。现在的问题是，如果更改了图像，则div不在图像上的同一位置（我知道顶部和左侧现在都已更改，所以我相应地更改了它们-新的左侧是旧的顶部等）。

有什么办法解决这个问题？也许有可能首先防止图像旋转。

最佳答案

使用css media queries通过设备方向应用不同的图像旋转：

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
    img.class {
       transform: rotate(270deg);
       -moz-transform: rotate(270deg);
       -webkit-transform: rotate(270deg);
    }
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    img.class {
       transform: rotate(270deg);
       -moz-transform: rotate(270deg);
       -webkit-transform: rotate(270deg);
    }
}