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:
- 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.
- 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.
- Je l'ai essayé sans la meta viewport des trucs, sans aucun effet.
OK, maintenant pour mes questions:
- 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?
- 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.
Ouais--- était d'expérimenter avec différents JPEG qualités.
OriginalL'auteur Marc Rochkind | 2010-09-15
Vous devez vous connecter pour publier un commentaire.
J'ai trouvé quelque chose sur les règles qui sont appliquées si une image est automatiquement converti dans le navigateur safari mobile:
http://teknocat.org/blog/computer-stuff/web-development/show/6/mobile-safari-background-image-scaling-quirk
+1 C'est extrêmement utile, merci beaucoup!
J'utilise un gros sprite css et atteint le safari de l'image de fond limite avec un 3000x320px image. le lien que tu as posté m'a aidé à trouver ce, même si la limite j'ai dû est inférieur à celui mentionné dans le lien. merci ! voir ggendre.posterous.com/warning-io6-css-sprite-max-size-problems pour plus de détails
OriginalL'auteur Erik
Tard pour le jeu, mais j'ai eu la même question, et finissent par obtenir l'info de la bouche des chevaux ici: Apple Safari Docs bas, à Savoir iOS les Limites des Ressources par sujet. Beaucoup de pièges.
OriginalL'auteur Chris Subagio
Si vous êtes à l'aide de DIV avec attributs en arrière-plan et vous connaissez la taille de l'image d'arrière-plan-la taille de l'attribut avec la largeur de l'image et de la hauteur.
Si vous utilisez balise img puis définissez la largeur et la hauteur
alors il devrait fonctionner.
OriginalL'auteur tarikakyol