UIWebView redimensionne le texte après la rotation: la recherche de l'explication magique de bug ou de la stupidité de ma part

Question

j'ai donc UIWebView dans mon application et j'ai la charge, html (article) pour mettre un peu de CSS pour rendre le tout plus agréable. C'est simple et clair et tout est parfait jusqu'à ce que j'essaie d'ajouter de la lecture dans le paysage de la fonctionnalité et puis j'ai remarqué que UIWebView ignore tout css "font-size" j'ai mis dans le HTML et augmente la taille de la police considérablement après la rotation en mode paysage.

J'ai passé environ 4 à 5 heures (je suis nouveau à la programmation d'une application Iphone, mais je suis assez têtu quand il s'agit de faire quelque chose de bien) pour tenter d'y remédier. Essayé des tas et des tas d'options de configuration - RIEN.

Et ce soir, quelque chose de magique s'est passé. 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 j'ai seulement ajouté le même code un plus de temps et d'accroissement de la marge (moins) par un point. Et n'setFrame à nouveau (non, il ne résout pas le redimensionnement avec un seul jeu de setFrames).

Je suis content que ça fonctionne, mais je voudrais savoir COMMENT et POURQUOI, si je peux le faire "bien", parce que maintenant, le code semble stupide et avoir 1 point de hauteur de la marge en bas de l'application.

Et ne me demandez pas pourquoi j'ai essayé de copier coller le même code à nouveau..

Answer 1

Le Safari de Contenu Web Guide mentionne également comment désactiver le redimensionnement automatique 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 2

Et la solution magique est:

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

Si seulement je savais cette semaine.. Donc beaucoup de temps, tellement les nerfs suis perdu..

Answer 3

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 été en mesure d'injecter à la fois dans un site web, à l'aide de ce code 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);

À l'aide de la webViewDidFinishLoad de la 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];

}

Answer 4

Vous avez probablement juste besoin de lire ceci

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

De même, si vous spécifiez uniquement le fenêtre d'affichage de la largeur, de la hauteur et initiale échelle sont déduites. Figure 3-15 montre le rendu de la page web quand même la fenêtre d'affichage de la largeur est fixée à 320. Notez que l'orientation portrait est rendu, le même que dans la Figure 3-14, mais l'orientation paysage maintient une largeur de 320 pixels, ce qui les changements de l'échelle initiale et a la effet de zoom lorsque l'utilisateur modifications de l'orientation paysage.

Answer 5

J'ai essayé votre cas, mais pas de chance.

La soluion a fonctionné pour moi a été:

[webView recharger];