手機網站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的替代方案

回答

相關問題