Webview non zoomable qui fonctionne à la fois pour les résolutions iPhone et iPhone4

Je souhaite avoir une WebView avec un seul fichier HTML et un seul fichier CSS, des graphiques de la même taille, mais une résolution native pour chacun. Mes vues Web existantes, conçues pour 320 x 480, semblent bien cadrer (avec un texte net et un rayon de bordure par exemple), même si les images sont à demi-résolution dans le simulateur iPhone4. Comment puis-je simuler le comportement de chargement de l'image native où un graphique ou sa version double résolution est automatiquement choisi avec HTML, CSS ou JS? (Je l'espère pas JS)Webview non zoomable qui fonctionne à la fois pour les résolutions iPhone et iPhone4

J'utilise actuellement une déclaration de la fenêtre comme ceci:

<meta content='initial-scale=0.5; maximum-scale=1.0; minimum-scale=0.5; user-scalable=0;' name='viewport' />

Ce fait un zoom arrière et les pixels d'image sont 1: 1 avec des pixels d'affichage, mais il adapte aussi bas tout autre . Et bien sûr, il est minuscule sur l'écran de l'iPhone.

J'ai l'impression que cela a quelque chose à voir avec une sorte de requête média de taille de viewport?

Source

2010-06-22 Alex Wayne

Art antérieur: http://stackoverflow.com/questions/1790346/uiwebview-scaling-image-independently-from-text - avec les images d'arrière-plan cela apporte plus de maux de tête, mais essayez 'webkit- background-size', devinez que cela fonctionnera. –

Avez-vous le même comportement sur l'appareil? Le Sim a plusieurs bugs connus. – Olie

Je suis tombé sur l'autre jour: http://aralbalkan.com/3331

Cela va charger un iPhone 4 stylesheet

<link 
    rel="stylesheet" 
    type="text/css" 
    href="/css/retina.css" 
    media="only screen and (-webkit-min-device-pixel-ratio: 2)" 
/>

Ensuite, dans votre basse résolution stylesheet le mouvement magique est de définir votre propriété de taille de fond à la taille de l'image basse résolution.

.demoImage 
{ 
    background-image: url(../images/my-image-64.png); 
    background-size: 64px 64px; 
    background-repeat: no-repeat; 
}

maintenant à retina.css montrent simplement la version à double res

.demoImage 
{ 
    background-image: url(../images/my-image-128.png); 
}

maintenant l'image d'arrière-plan css affiche une image 128x128 comme si elle était de 64 pixels css fournissant 1: 1 pixel d'image pour afficher pixel affichage de l'image sur un iPhone 4.

Source

2010-07-23 16:41:25

J'ai le même problème. Je n'ai pas le temps de travailler dessus, mais mon idée est de créer des graphiques avec des pixels plus élevés par pouce et d'utiliser ceux pour iphone 3g (s) et iphone 4.

Je ne sais pas si ça va marcher tho. Mais ça vaut le coup.

Source

2010-07-01 10:35:39

Le problème avec cela est la bande passante. Vous gaspillez de la bande passante en envoyant des images plus grandes que ce dont vous avez besoin sur des non-iPhone4. Bien qu'il devrait les redimensionner bien. –

Cela va charger une feuille de style spécifique pour iPhone 4:

<link 
    rel="stylesheet" type="text/css" href="/css/style.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" 
/>

Source

2010-07-08 01:35:48

A CSS media query devrait fonctionner:

@media only screen and (min-resolution: 300dpi) { ... }

En outre, une liste Apart propose une technique à prendre en compte pour serving high-res images. L'article est principalement sur les styles d'impression, mais s'applique aussi bien ici.

Source

2010-07-23 15:52:26

Webview non zoomable qui fonctionne à la fois pour les résolutions iPhone et iPhone4

Répondre

Questions connexes