Я хочу отображать очень широкие панорамные изображения в Mobile Safari (iPhone, iPod, iPad). Они отлично работают в OS X Safari и в других браузерах, но в Mobile Safari, похоже, существует ограничение на максимальную ширину изображения.
Рассмотрим эту веб-страницу:
http://basepath.com/public/test1.html
с этим источником:
<!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>
Он делает именно то, что я хочу в Mobile Safari. Вы можете панорамировать фото. Соотношение сторон составляет около 3,2: 1
.
Но более широкое изображение, около 4: 1, уменьшается, как показано на этой странице:
[http://]basepath.com/public/test2.html
[Моя низкая репутация не позволяет мне предоставить вышеуказанное в качестве ссылки. Только один.]
Источник идентичен, за исключением комментария и изображения:
<!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, чтобы увидеть проблему.
Прежде чем ответить, некоторые дополнительные факты:
Изображение № 2, которое не работает, составляет всего 200 КБ (очень низкое качество JPEG). Изображение № 1, которое делает, это 700K. Так что размер не проблема.
Размещение явной ширины и высоты для элемента IMG действительно делает изображение нужного размера, но оно масштабируется и, следовательно, имеет неровности. Я хочу реальные пиксели. Таким образом, проблема заключается в том, что изначально загружается изображение, а не обрабатывается для презентации.
Я пробовал это без метапрограммы окна просмотра, без эффекта.
ОК, теперь мои вопросы:
Есть ли ограничение на то, насколько широко Mobile Safari будет показывать изображение? Кто-нибудь знает документацию для него, и, если да, каковы правила?
Есть ли способ обойти проблему? Я довольно долго разбирался с JavaScript, чтобы попытаться создать динамический HTML, чтобы выполнить свою работу, но, как я уже говорил выше, я думаю, что проблема возникает, когда изображение сначала загружается, слишком рано для того, чтобы что-то сделано в JavaScript было эффективным.