Unterdrücken Sie WKWebView, Inhalte zu skalieren, um sie mit derselben Vergrößerung wie UIWebView zu rendern


73

Problem

Bei der Verwendung WKWebViewvon anstelle von UIWebViewbemerkte ich, dass der Inhalt des im WKWebViewVergleich zu meinem massiv verkleinert wurde UIWebView. Ich möchte, dass die WKWebViewdamit aufhören und meine CSS-Werte buchstäblich respektieren, so wie es der Fall UIWebViewwäre.

Kontext

Ich verwende Webansichten in meiner nativen iOS-App für die Inhalte, die in Popovers auf einem iPad gespeichert sind, auf dem ich Informationsinhalte anzeige. Es ist großartig, dies Inhalten und Designern geben zu können und zu sagen: "Fügen Sie einfach HTML-Inhalte hinzu und verweisen Sie auf die verknüpfte CSS-Datei."

All dies hat bei der Verwendung einfach großartig funktioniert UIWebView.

Aber Popovers sind oft recht kompakt.

Was ich erlebe

In meinen engen Popovers wird der Inhalt so verkleinert, als ob mein Inhalt eine gesamte Webseite miniaturisiert, um zu passen. Ich kann sehen, dass WKWebView in erster Linie für Leute gedacht war, die alternative Browser unter iOS oder Hybrid-Apps erstellen, bei denen WKWebView im Wesentlichen den Bildschirm übernimmt.

Der Vergrößerungsfaktor in WKWebView kann nicht eingestellt werden. Sicher, der Benutzer kann zoomen, aber das macht den Zweck zunichte. Ich suche kein vergrößertes Ansichtsfenster. Ich suche nach dem gesamten Inhalt, der wie bei UIWebView passt und in Zeilenumbrüche passt.

Mit WKWebView sehe ich im Simulator die gewünschte Größe, wenn ich meine Körpertextgröße auf 50 statt 14 Pixel erhöhe. Dieser Code hilft jedoch nicht einmal auf dem Gerät, sodass das Aufblasen meiner CSS-Größen ebenfalls keine Option ist!

Was ist falsch an UIWebView?

Naja, eigentlich nichts. Es ist (noch) nicht veraltet in iOS8, vielleicht hat es b / c immer noch Nützlichkeit, wie ich erlebe. Mir ist jedoch aufgefallen, dass WKWebView schnell war. Und ich habe einige Spekulationen gesehen, dass die Schrift für UIWebView an der Wand hängt. Ich dachte: "Warum nicht jetzt die modernere API in iOS8 übernehmen?"

Daher verwende ich UIWebView vorerst weiterhin, möchte jedoch auf WKWebView umsteigen, wenn ich meine CSS-Größe einhalten kann.

Hier ist mein ursprüngliches CSS, das UIWebView gut rendert, das WKWebView in einem Popover jedoch in wirklich winzigen Schriftarten rendert:

body {
    font-family: "HelveticaNeue";
    font-size: 15px;
    line-height: 17px;
    color: #000000;
}

h1 {
    font-family: "HelveticaNeue-Bold";
    font-size: 18px;
    line-height: 20px;
    color: #000000;
}


h2 {
    font-family: "HelveticaNeue-Bold";
    font-size: 16px;
    line-height: 18px;
    color: #000000;
}

Antworten:


171

Ich hatte das gleiche Problem. Ich musste nur setzen

<meta name="viewport" content="initial-scale=1.0" />

in meinen Headerblock und das löste es für mich. Es sieht so aus, als würde es WKWebViewsich eher wie Mobile Safari als wie eine Safari verhalten. UIWebViewSie müssen also das Ansichtsfenster festlegen, wenn Sie die Skalierung oder die allgemeine Größe steuern möchten.


6
Sie haben mein Leben gerettet, ich war total deprimiert darüber, warum es mein CSS durcheinander gebracht hat, aber Sie haben mich gerettet. Du bist mein Engel!
Sana

2
Wer liebt nicht eine einzeilige Lösung? Vielen Dank!!
Rickster

1
Gültiger Code: <meta name = "viewport" content = "initial-scale = 1.0" />
5ергей Билык

1
Genau! Es wird nur Ihrem HTML-Code vorangestellt:stringHTML = "<meta name=\"viewport\" content=\"initial-scale=1.0\" />" + stringHTML
Ruben Marin

2
Was kann schief gehen -> Wenn die Schriftart einmal in Ordnung ist und der Benutzer versucht, dieselbe HTML-Vorlage mit einem anderen <body> -Inhalt zu laden, wird die Schriftgröße geändert? <meta name = 'Ansichtsfenster' content = 'Anfangsskala = 1,0, Maximalskala = 1,0, Minimalskala = 1,0, Benutzerskalierbarkeit = Nein, Breite = 400'>
Massmaker
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.