Question

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

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

此刻我的解决方案是，当设备旋转到相同的图像但90 *旋转时更改图像。对于用户可以触摸的点，我使用div s进行自定义触摸事件。现在的问题是，如果图像被更改，div s不在图像上的相同位置（我知道顶部和左边现在已经改变了，所以我相应地改变了它们 - 新左边是老顶等）。

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

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

移动网站上ImageMap的替代方案

1 个答案: