Max largeur de l'image dans le navigateur Safari Mobile? Obtenir indésirables réduction sur panos

Je veux afficher très large, des images panoramiques dans le navigateur Safari Mobile (iPhone, iPod, iPad). Ces beaux travaux dans OS X Safari et les autres navigateurs, mais sur Mobile Safari, il semble y avoir une limite au maximum la largeur de l'image.

Envisager cette page web:

http://basepath.com/public/test1.html

avec cette source:

<!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>

C'est exactement ce que je veux sur le navigateur Safari Mobile. Vous pouvez recadrer la photo. Le rapport d'aspect est d'environ 3.2:1.

Mais une plus grande image, à environ 4:1, se réduit, comme on le voit sur cette page:

[http://]basepath.com/public/test2.html

[Ma réputation m'empêche de le ci-dessus comme un lien. Limité à un seul.]

La source est identique sauf pour le commentaire et l'image:

<!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>

Vous devez afficher sur le navigateur Safari Mobile pour voir le problème.

Avant de vous répondre, quelques faits:

  1. Image #2, qui ne fonctionne pas, est seulement 200K (très faible qualité JPEG). Image #1, ce qui n'est 700K. Si la taille n'est pas le problème.
  2. De mettre un width et height explicites sur l'élément IMG, en effet, de rendre l'image à la bonne taille, mais il est mis à l'échelle et, par conséquent, a des effets dent de scie. Je veux pixels réels. Le problème semble donc être dans le chargement de l'image d'origine, pas de traitement en vue d'une présentation.
  3. Je l'ai essayé sans la meta viewport des trucs, sans aucun effet.

OK, maintenant pour mes questions:

  1. Est-il en fait une limite sur la façon dont l'échelle Mobile Safari affiche une image? Quelqu'un sait-il de la documentation pour elle, et, dans l'affirmative, quelles sont les règles?
  2. Est-il un moyen de contourner le problème? J'ai horsed autour avec du JavaScript un peu pour tenter de construire HTML dynamique pour faire le travail, mais, comme je l'ai dit ci-dessus, je pense que le problème se produit lorsque l'image est d'abord téléchargé, beaucoup trop tôt pour tout ce qui est fait en JavaScript pour être efficace.
BTW, ta deuxième photo lien (farm5.static.flickr.com/4152/4987348660_e486e631e2_o.jpg) est en baisse.
Ouais--- était d'expérimenter avec différents JPEG qualités.

OriginalL'auteur Marc Rochkind | 2010-09-15