2012-12-15 37 views
0

我遇到以下問題。我正在寫一個網站,其中包含jQuery Mobile(數據來自drupal cms)。手機網站ImageMap的替代方案

我目前最大的問題是,我有一個圖像,用戶應該能夠觸摸以獲取更多信息。問題是,設備旋轉時圖像不應該旋轉。

我現在的解決方案是,當設備旋轉到90 *旋轉的同一圖像時更改圖像。對於用戶可以觸摸的點,我使用div與自定義觸摸事件。現在的問題是,如果圖像被改變,div s不在圖像上的相同位置(我知道現在頂部和左側已經改變了,所以我相應地改變了它們 - 新的左側是舊的頂部等等)。

有什麼辦法解決這個問題嗎?也許這是可能的,以防止圖像旋轉擺在首位。

+0

如果您使用的是圖像映射...爲什麼你趕上div的觸摸事件?如果以「普通」方式使用它,則不需要因旋轉而更新任何內容(如果您的佈局可以適應新的外形因素)。 –

+0

由於漫遊,我暫時不使用圖像映射。圖像不應旋轉。 –

回答

0

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