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

Question

donc j’ai UIWebView dans mon application et j’y charge du html (article), 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 de la lecture dans la fonctionnalité paysage, puis j’ai remarqué que UIWebView ignorait les css "font-size" " Je l'ai mis en HTML et augmente considérablement la taille de la police après avoir basculé en mode paysage.

J'ai passé environ 4 à 5 heures (pour la première fois, je programme une application Iphone, mais je suis assez têtu lorsqu'il s'agit de faire quelque chose de bien) pour essayer de le réparer. Essayé de nombreuses options de configuration - RIEN.

Et ce soir, il s'est passé quelque chose de magique. Il suffit de regarder la source:

Paysage avec le bogue:

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 (la taille de la police ne change 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 constater, je n’ai ajouté le même code qu’une fois de plus et augmenté la marge (moins) d’un point. Et encore setFrame (non, cela ne résout pas le redimensionnement avec un seul ensemble de setFrames).

Je suis heureux que cela fonctionne, mais j'aimerais savoir COMMENT et POURQUOI, afin de pouvoir le faire "correctement", car le code a maintenant l'air stupide et a une marge de 1 point au bas de l'application.

Et ne demandez pas pourquoi j'ai essayé de copier-coller à nouveau 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 le savais il y a une semaine .. Tant de temps, tant de nerfs se sont perdus ..

Answer 2

Le Le Guide du contenu Web Safari explique également comment désactiver la taille automatique du 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 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 pu injecter les deux dans un site Web existant à 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);

Utilisation de webViewDidFinishLoad à partir de 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

https://developer. .com / bibliothèque / contenu / documentation / applications / référence / safariwebcontent / Utilisation de ViewView / Utilisation de ViewView.html

  

De même, si vous ne spécifiez que le   largeur de la fenêtre, hauteur et initiale   échelle sont inférées. La figure 3-15 montre   le rendu de la même page Web lorsque   la largeur de la fenêtre d'affichage est définie sur 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    change l'échelle initiale et a le   effet de zoom avant lorsque l'utilisateur   modification de l'orientation du paysage.

Answer 5

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

La solution qui a fonctionné pour moi était la suivante:

[rechargement webView];

Answer 6

J'ai une autre méthode pour le résoudre en ajoutant l'élément:

<table>
<tr>
<td>
  [your html content]
</td>
</tr>
</table>