How to prevent auto-rotating images on iOS on HTML with CSS/Javascript

Question

I am creating a photo site - I uploaded a photo of myself which is actually incorrectly oriented (the image is rotated 90 degrees counter clockwise). I have uploaded this image from my iPhone, which apparently has the image stored this way on purpose.

On my site, the HTML page has rendered a JSON object that contains the URL to the photo as well as the image dimensions. I am using jQuery mobile - and onload of the page I put a link on the page, and when you click the photo it displays the photo as a popup. The popup renders an <img> tag with dimensions that are small enough to fit the image within the current viewport width/height. It calculates the dimensions using the JSON I previously mentioned, and the results from $(window).width() and $(window).height().

On desktop - the photo correctly displays in the wrong orientation (because that is how the photo is actually stored).

On iPad & iPhone - the photo is auto-rotated so the photo is correctly oriented, but the dimensions are all wrong so the photo is all stretched out and distorted.

I would like to know the following:

1. Is this a commonly known feature of browsers on iOS or other devices?
2. Is there a way to disable this functionality using CSS or Javascript?
3. Is there a way to detect that it happened and correct the dimensions of the <img> tag? I don't mind that the photo's orientation was corrected by the browser, I just want the dimensions to be proper.

EDITS

Making the Title more in the form of a question - Also reformulating the question to be more direct

MORE EDITS

Here is a JS Fiddle with an example: http://jsfiddle.net/5JKgn/

If you click the link on a desktop computer, the popup shows the image improperly oriented. If you click the link on an iPhone or iPad, the popup shows the image properly oriented, but the dimensions are wrong so the photo is stretched.

In the real scenario, the JSON is rendered by PHP code which can read the image and outputs the width height from what it gets using getimagesize()

Answer 1

OK I'll try to answer this one:

1. Yes that's on purpose iOS stores the display-orientation in the EXIF data (among things like resolution, shutter, GPS etc.) but saves the image data in device-orientation.
   For more info on EXIF see Wikipedia.

2. Not that I know of.

3. Yes, you should be able to access the EXIF data and determine orientation and dimensions.

Nr. 3 needs a little more explanation:

You could use a library like this one to access the EXIF data from javascript (includes jQuery plugin). The Orientation Tag is defined as: 0x0112 : "Orientation" and stored as a number.

Using that information you can determine the orientation:

Value | Orientation
------|----------------------
1     | horizontal (normal)
2     | flip horizontal
3     | rotate 180°*
4     | flip vertical
5     | transpose
6     | rotate 90°*
7     | transverse
8     | rotate 270°*
* rotation is counter clockwise

That should enable you to at least swap width / height for your <img> if need. Please not that the EXIF data also includes the width and height so if they differ from what you think they should be that could also help to identify rotation issues.

Answer 2

To formalize my comments - perhaps you can just sidestep the issue:

1. If you don't need to store exact originals, you could rotate the data when storing/retrieving the image.

2. Or, as the OP noted in response, just remove the EXIF tag, and browsers will no longer be able to use it for 'fixing' the orientation.

(p.s. Always remember to ask 'why' enough times to figure out what problem you're actually trying to solve :D)