UIWebView ändert die Größe Text nach dem Drehen: die Suche nach Erklärungen für magische Fehler oder meine Dummheit

Question

so ich UIWebView in meiner Anwendung haben und ich einige html (Artikel), um es zu laden, setzen einige CSS alles schöner zu machen. Das ist einfach und klar und alles ist perfekt, bis ich versuche, das Lesen in der Landschaft Funktionalität hinzufügen und dann habe ich bemerkt, dass UIWebView jede css „font-size“ ignoriert Ich habe in HTML setzen und erhöht die Schriftgröße drastisch nach in dem Querformat drehen.

Ich habe über 4-5 Stunden damit verbracht (ich bin neu in der Programmierung Iphone-Anwendung, aber ich bin ziemlich stur, wenn es etwas richtig zu machen kommt) versuchen, es zu beheben. Versuchte sehr viele Konfigurationsmöglichkeiten -. NICHTS

Und heute Abend etwas Magisches geschehen. Schauen Sie sich nur Quelle:

Landschaft mit dem 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)];

Landschaft fixiert (Schriftgröße ändert sich nicht mehr):

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)];

Wie Sie sehen Ich habe nur den gleichen Code ein weiteres Mal und erhöhte Marge (minus) um einen Punkt. Und tat SetFrame wieder (nein, ist es nicht repariert das Ändern der Größe mit nur einem Satz von setFrames).

Ich bin froh, es funktioniert, aber ich würde gerne wissen, wie und warum, so kann ich es „richtigen Weg“, tun, weil jetzt Code dumm aussieht und haben 1 Punkt heigh Marge am unteren Rand der Anwendung.

Und fragen Sie nicht, warum ich habe versucht, wieder den gleichen Code zu kopieren und einfügen ..

Answer 1

Und die magische Lösung war:

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

Wenn ich nur wüsste, in dieser Woche vor .. So viel Zeit, so viele Nerven verloren gegangen ..

Answer 2

Das Safari Web HotPicks auch erwähnt, wie die automatische Anpassen von Text in der CSS deaktivieren, das das Problem in meinem Fall gelöst.

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

Answer 3

die ersten beiden Antworten verwenden, die CSS-Eigenschaft:

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

und der Meta-Tag:

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

Ich konnte beide in eine bestehende Website injizieren, um dieses Javascript Code verwendet:

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);

Mit dem webViewDidFinishLoad vom 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

Sie wahrscheinlich brauchen nur das lesen

https://developer.apple .com / library / content / Dokumentation / appleapplications / reference / safariwebcontent / UsingtheViewport / UsingtheViewport.html

  

Und falls Sie nur geben Sie die   Ansichtsfenster Breite, die Höhe und die Anfangs-   Maßstab ist geschlossen. Abbildung 3-15 zeigt,   die Wiedergabe der gleichen Webseite, wenn   die Darstellungsbreite wird auf 320 eingestellt.   Orientierung feststellen, dass das Portrait   ist das gleiche wie in Abbildung gerenderte   3-14, aber die Landschaft Orientierung   unterhält eine Breite von 320 Pixeln, die    ändert den ursprünglichen Maßstab und hat die   Wirkung des Zoomens, wenn der Benutzer in   Änderungen im Querformat.

Answer 5

habe ich versucht, Ihren Fall aber kein Glück.

Die Lösung für mich gearbeitet wurde:

[webView reload];

Answer 6

Ich habe eine andere Methode, um es zu lösen durch Zugabe von Elemente:

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