javascript - 如何使用 CSS/Javascript 防止在 HTML 上的 iOS 上自动旋转图像

我正在创建一个照片网站 - 我上传了一张自己的照片，但实际上方向不正确(图像逆时针旋转了 90 度)。我已经从我的 iPhone 上传了这张图片，这显然是故意以这种方式存储的。

在我的网站上，HTML 页面呈现了一个 JSON 对象，其中包含照片的 URL 以及图像尺寸。我正在使用 jQuery mobile - 在页面加载时我在页面上放了一个链接，当您单击照片时，它会将照片显示为弹出窗口。弹出窗口渲染一个 <img> 标签，其尺寸足够小以适合当前视口(viewport)宽度/高度内的图像。它使用我之前提到的 JSON 以及 $(window).width() 和 $(window).height() 的结果计算维度。

在桌面上 - 照片以错误的方向正确显示(因为照片实际上是这样存储的)。

在 iPad 和 iPhone 上 - 照片会自动旋转，因此照片方向正确，但尺寸全部错误，因此照片都被拉伸(stretch)和扭曲。

我想知道以下内容:

这是 iOS 或其他设备上浏览器的常见功能吗？

有没有办法使用 CSS 或 Javascript 禁用此功能？

有没有办法检测它发生并更正 <img> 标签的尺寸？我不介意浏览器更正了照片的方向，我只希望尺寸正确。

编辑

使标题更多地采用问题的形式 - 同时将问题重新表述为更直接

更多编辑

这是一个带有示例的 JS Fiddle:http://jsfiddle.net/5JKgn/

如果您单击台式计算机上的链接，则弹出窗口会显示方向不正确的图像。如果您在 iPhone 或 iPad 上单击链接，弹出窗口会显示正确定向的图像，但尺寸错误，因此照片会被拉伸(stretch)。

在实际场景中，JSON 由 PHP 代码呈现，PHP 代码可以读取图像并使用 getimagesize() 从它得到的输出宽度高度

最佳答案

正式化我的评论——也许你可以回避这个问题:

如果您不需要存储精确的原件，您可以在存储/检索图像时旋转数据。

或者，正如 OP 在回应中指出的那样，只需删除 EXIF 标签，浏览器将不再能够使用它来“修复”方向。

(ps. 总是 remember to ask 'why' 足够多的时间来弄清楚你真正想要解决的问题:D)

关于javascript - 如何使用 CSS/Javascript 防止在 HTML 上的 iOS 上自动旋转图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21201548/