Question

i have the following problem. I’m writing a website with jQuery Mobile (the data comes from a drupal cms).

My biggest problem at the moment is, that I have an image where the user should be able to touch to get additional information. The problem is, the image should not rotate when the device is rotated.

My solution at the moment is, to change the image when the device is rotated to the same image but 90* rotated. For the points where the user can touch I use divs with a custom touch event. The problem now is, that if the image is changed, the divs are not on the same position on the image (I know that the top and left have now changed, so i changed them accordingly – the new left is the old top etc.).

Is there any way to solve this? Maybe it is somehow possible to prevent the image from rotating in the first place.

Answer 1

Use css media queries to apply different image rotation by device orientation:

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