Максимальная ширина изображения в Mobile Safari? Получение нежелательного уменьшения масштаба на паносе
Я хочу отображать очень широкие панорамные изображения в Mobile Safari (iPhone, iPod, iPad). Они прекрасно работают в OS X Safari и в других браузерах, но в Mobile Safari, похоже, существует ограничение на максимальную ширину изображения.
Рассмотрите эту веб-страницу:
http: //basepath.com/public/test1.htm
с этим источником:
<!DOCTYPE HTML>
<html>
<head>
<meta name = 'viewport' content = 'width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
<title>Test Image 1</title>
</head>
<body>
<p>
2415 x 750 (about 3.2:1)
<p>
<img src='http://farm5.static.flickr.com/4129/4987348894_76194e79d6_o.jpg' />
</body>
</html>
Он делает именно то, что я хочу в мобильном сафари. Вы можете панорамировать фото. Соотношение сторон составляет около 3,2:
Но более широкое изображение, около 4: 1, уменьшается, как показано на этой странице:
[http: //] basepath.com/public/test2.htm
[Моя низкая репутация не позволяет мне предоставить вышеуказанное в качестве ссылки. Только один.]
Источник идентичен, за исключением комментария и изображения:
<!DOCTYPE HTML>
<html>
<head>
<meta name = 'viewport' content = 'width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
<title>Test Image 2</title>
</head>
<body>
<p>
3028 x 750 (about 4:1)
<p>
<img src='http://farm5.static.flickr.com/4113/4994072964_1a7f7f90fe_o.jpg' />
</body>
</html>
Чтобы увидеть проблему, вы должны просмотреть их в Mobile Safari.
Прежде чем ответить, некоторые дополнительные факты:
Image # 2, который не работает, составляет всего 200 КБ (очень низкое качество JPEG). Изображение № 1, которое делает, это 700K. Так что размер не проблема.
Размещение явной ширины и высоты для элемента IMG действительно делает изображение нужного размера, но оно масштабируется и, следовательно, имеет неровности. Я хочу реальные пиксели. Таким образом, проблема заключается в том, чтобы изначально загрузить изображение, а не обработать его для презентации.
Я пробовал это без метапрограммы окна просмотра, без эффекта.
Хорошо, теперь на мои вопросы:
Есть ли ограничение на то, насколько широко Mobile Safari будет показывать изображение? Кто-нибудь знает документацию для него, и, если да, каковы правила?
Есть ли способ обойти проблему? Я довольно долго разбирался с JavaScript, чтобы попытаться создать динамический HTML, чтобы выполнить свою работу, но, как я уже говорил выше, я думаю, что проблема возникает, когда изображение сначала загружается, слишком рано, чтобы что-то сделать в JavaScript было эффективным.