UIWebView redimensionne le texte après rotation: recherche d'explication pour un bug magique ou ma stupidité

Question

J'ai donc UIWebView dans mon application et je charge du html (article), je mets du CSS pour que tout soit plus agréable. C'est simple et clair et tout est parfait jusqu'à ce que j'essaie d'ajouter la lecture dans la fonctionnalité paysage et puis j'ai remarqué que UIWebView ignore toute taille de police CSS que j'ai mis en HTML et augmente la taille de la police après le passage en mode paysage.

J'ai passé environ 4-5 heures (je suis novice en programmation d'application Iphone, mais je suis assez têtu quand il s'agit de faire quelque chose de bien) en essayant de le réparer. J'ai essayé beaucoup et beaucoup d'options de configuration - RIEN.

Et ce soir quelque chose de magique est arrivé. Il suffit de regarder la source:

Paysage avec le Bug:

r = CGRectMake(0.0, 0.0, 480.0, 320.0); 
[adView.view removeFromSuperview]; 
if (!isFullScreen) { 
    minus = 50 + minus; 
    [controlsView setFrame:CGRectMake(0, r.size.height - 50, r.size.width, 50)];   
} else { 
    minus = 20; 
} 

[textView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)]; 
[scrollView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)]; 

Paysage fixe (taille de la police ne change pas plus):

r = CGRectMake(0.0, 0.0, 480.0, 320.0); 
[adView.view removeFromSuperview]; 
if (!isFullScreen) { 
    minus = 50 + minus; 
    [controlsView setFrame:CGRectMake(0, r.size.height - 50, r.size.width, 50)];   
} else { 
    minus = 20; 
} 
[textView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)]; 
[scrollView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)]; 

if (!isFullScreen) { 
    minus = 1 + minus; 
} else { 
    minus = 20+1; 
} 
[textView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)]; 
[scrollView setFrame:CGRectMake(0, 0, r.size.width, r.size.height - minus)]; 

Comme vous pouvez le voir, je n'ajouté le même code une fois de plus et une augmentation de la marge (moins) d'un point. Et refait SetFrame (non, il ne corrige pas le redimensionnement avec un seul ensemble de setFrames). Je suis heureux que cela fonctionne, mais je voudrais savoir comment et pourquoi, donc je peux le faire "droit chemin", parce que maintenant le code semble stupide et avoir une marge de 1 point de haut au bas de l'application.

Et ne demandez pas pourquoi je l'ai essayé de copier coller le même code ..

Answer 1

Et la solution magique était:

<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0;'> 

Si seulement je savais il y a cette semaine .. Donc, beaucoup de temps, les nerfs beaucoup se sont perdus ..

Answer 2

Vous avez probablement juste besoin de lire ce

http://developer.apple.com/safari/library/documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html

De même, si vous spécifiez seule la largeur de la fenêtre , la hauteur et l'échelle initiale sont déduites. La figure 3-15 montre le rendu de la même page Web lorsque la largeur de la fenêtre est définie sur 320. Notez que l'orientation portrait est rendu le même que celui de la figure 3-14, mais l'orientation paysage maintient une largeur 320 pixels, dont modifie l'échelle initiale et a l'effet de zoom lorsque l'utilisateur change pour l'orientation paysage.

Answer 3

j'ai essayé votre cas, mais pas la chance.

Le soluion a fonctionné pour moi était:

[webView reload];

Answer 4

Le Safari Web Content Guide mentionne également comment désactiver l'auto-édition de texte dans le CSS, ce qui a résolu le problème dans mon cas.

html { 
    -webkit-text-size-adjust: none; /* Never autoresize text */ 
} 

Answer 5

En utilisant les deux premières réponses, la propriété CSS:

html { 
    -webkit-text-size-adjust: none; /* Never autoresize text */ 
} 

et la balise meta:

<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0;'> 

j'ai pu injecter à la fois dans un site Web existant, en utilisant ce javascript code:

var style = document.createElement(\"style\"); 
document.head.appendChild(style); 
style.innerHTML = "html{-webkit-text-size-adjust: none;}"; 
var viewPortTag=document.createElement('meta'); 
viewPortTag.id="viewport"; 
viewPortTag.name = "viewport"; 
viewPortTag.content = "width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"; 
document.getElementsByTagName('head')[0].appendChild(viewPortTag); 

Utilisation de la webViewDidFinishLoad du UIWebViewDelegate:

- (void)webViewDidFinishLoad:(UIWebView *)webView{ 

    NSString *javascript = @"var style = document.createElement(\"style\"); document.head.appendChild(style); style.innerHTML = \"html{-webkit-text-size-adjust: none;}\";var viewPortTag=document.createElement('meta');viewPortTag.id=\"viewport\";viewPortTag.name = \"viewport\";viewPortTag.content = \"width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;\";document.getElementsByTagName('head')[0].appendChild(viewPortTag);"; 
    [webView stringByEvaluatingJavaScriptFromString:javascript]; 

}