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:
- Is this a commonly known feature of browsers on iOS or other devices?
- Is there a way to disable this functionality using CSS or Javascript?
- 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()
