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

Question

我有以下问题。我正在使用 jQuery Mobile 编写一个网站(数据来自 drupal cms)。

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

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

有什么办法可以解决吗？也许首先可以以某种方式防止图像旋转。

Answer 1

使用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);
    }
}