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

Question

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

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

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

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

Answer 1

使用css 媒体查询按设备方向应用不同的图像旋转：

/* 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);
    }
}