手机网站ImageMap的替代方案

我遇到以下问题。我正在写一个网站，其中包含jQuery Mobile（数据来自drupal cms）。手机网站ImageMap的替代方案

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

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

有什么办法解决这个问题吗？也许这是可能的，以防止图像旋转摆在首位。

来源

2012-12-15 Stefan Vogl

如果您使用的是图像映射...为什么你赶上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); 
    } 
}

来源

2013-01-09 10:16:43 grigno

手机网站ImageMap的替代方案

回答

相关问题