WKWebView-Äquivalent für UIWebViews scalePageToFit

92

Ich aktualisiere meine iOS-App, um sie UIWebViewdurch zu ersetzen WKWebView. Ich verstehe jedoch nicht, wie ich das gleiche Verhalten erreichen kann WKWebView. Mit habe UIWebViewich dafür scalesPageToFitgesorgt, dass der Web-Pag mit der gleichen Größe wie die Bildschirmgröße angezeigt wurde (um im Vollbildmodus ohne Scrollen zu erscheinen).

Ich habe diese Lösung im Web gefunden, aber sie funktioniert nicht:

- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation {
    NSString *javascript = @"var meta = document.createElement('meta');meta.setAttribute('name', 'viewport');meta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');document.getElementsByTagName('head')[0].appendChild(meta);";
    [webView evaluateJavaScript:javascript completionHandler:nil];
}
Olinsha
quelle
Versuchen Sie Folgendes: NSString* js = @"var meta = document.createElement('meta'); " "meta.setAttribute( 'name', 'viewport' ); " "meta.setAttribute( 'content', 'width = device-width' ); " "document.getElementsByTagName('head')[0].appendChild(meta)"; [webView stringByEvaluatingJavaScriptFromString: js];Ersetzen Sie Ihren Code durch den obigen Code.
22.
Ich habe es versucht, aber ich habe das gleiche Ergebnis (übrigens, die stringByEvaluatingJavaScriptFromString-Methode existiert nicht in WKWebView, also habe ich meinen
evaluJavaScript
1
Hast du eine Lösung bekommen?
anoop4real

Antworten:

126

Sie können auch das WKUserScript ausprobieren.

Hier ist meine Arbeitskonfiguration:

NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";

WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
WKUserContentController *wkUController = [[WKUserContentController alloc] init];
[wkUController addUserScript:wkUScript];

WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
wkWebConfig.userContentController = wkUController;

wkWebV = [[WKWebView alloc] initWithFrame:self.view.frame configuration:wkWebConfig];

Sie können Ihrer WKWebViewConfiguration eine zusätzliche Konfiguration hinzufügen.

NFerocious
quelle
2
Klappt wunderbar. Danke
Nithin Pai
2
Funktioniert hervorragend für mich - nur geringfügige Änderungen haben WKUserScriptInjectionTimeAtDocumentEnd in WKUserScriptInjectionTimeAtDocumentStart geändert
sckor
1
Wenn ich WKUserScriptInjectionTimeAtDocumentEndzu WKUserScriptInjectionTimeAtDocumentStartdann wechsle , funktioniert es bei mir nicht. Dieses Skript wird nicht hinzugefügt. irgendeinen Grund?
Mahesh K
2
Schöne Antwort, aber ich würde auch dieses Skript hinzufügen, um zu vermeiden, dass das Webkit die Schriftgrößen selbst ändert:var style = document.createElement('style');style.innerHTML = 'body { -webkit-text-size-adjust: none; }';document.getElementsByTagName('head')[0].appendChild(style);
José Manuel Sánchez
1
Das hat super geklappt. Ich habe versucht, einen speziellen Titel mit WKWebView an Auto Layout auszurichten. Die Höhe des Elements von offsetHeight wurde immer wieder zu groß, bis ich dieses Skript hinzufügte. Danke für die Hilfe.
JamWils
44

Echo der Antwort von nferocious76 im schnellen Code: Swift2.x-Version

let jscript = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);"
let userScript = WKUserScript(source: jscript, injectionTime: WKUserScriptInjectionTime.AtDocumentEnd, forMainFrameOnly: true)
let wkUController = WKUserContentController()
wkUController.addUserScript(userScript)
let wkWebConfig = WKWebViewConfiguration()
wkWebConfig.userContentController = wkUController
let youWebView = WKWebView(frame: CGRectZero, configuration: wkWebConfig)

Swift3-Version

let jscript = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);"
let userScript = WKUserScript(source: jscript, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
let wkUController = WKUserContentController()
wkUController.addUserScript(userScript)
let wkWebConfig = WKWebViewConfiguration()
wkWebConfig.userContentController = wkUController
let yourWebView = WKWebView(frame: self.view.bounds, configuration: wkWebConfig)
air_bob
quelle
20

Ähnlich wie bei @ nferocious76, jedoch in Swift-Sprache

var scriptContent = "var meta = document.createElement('meta');"
scriptContent += "meta.name='viewport';"
scriptContent += "meta.content='width=device-width';"
scriptContent += "document.getElementsByTagName('head')[0].appendChild(meta);"

webView.evaluateJavaScript(scriptContent, completionHandler: nil)
Efe Ariaroo
quelle
Vielen Dank! Dies löste auch mein Problem, die HTML-Schriftgröße größer zu machen, und wurde nicht von klein nach groß aktualisiert. Ich verwende dies, um die Schriftgröße und das innere Layout des Inhalts zu "aktualisieren".
Nadi Hassan
12

C # -Version zur Verwendung in Xamarin Custom Renderer:

string jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";

WKUserScript wkUScript = new WKUserScript((NSString)jScript, WKUserScriptInjectionTime.AtDocumentEnd, true);
WKUserContentController wkUController = new WKUserContentController();
wkUController.AddUserScript(wkUScript);

WKWebViewConfiguration wkWebConfig = new WKWebViewConfiguration();
wkWebConfig.UserContentController = wkUController;
WKWebView webView=new WKWebView(Frame, wkWebConfig);
Feuer im Loch
quelle
Arbeite wie Charme!
Divyesh_08
Wie sieht der benutzerdefinierte Renderer aus? Erben Sie von WkWebViewRenderer? Weil Controlsowie SetNativeControl()sind unbekannt ...
Testen
Ok, es scheint, dass Sie von erben ViewRenderer<CustomWebView, WKWebView>und verwenden müssen OnElementChanged(ElementChangedEventArgs<CustomWebView> e).
Testen
8

Ich habe es unten herausgefunden. Damit der Inhalt an die Gerätegröße angepasst wird.

func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {     for making the content to fit with the device size
    let jscript = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);"
    webView.evaluateJavaScript(jscript)
}
Ankita
quelle
6

Das Hinzufügen des Folgenden zu meinem HTML-Skript hat mir geholfen.

<meta name="viewport" content="width=device-width, shrink-to-fit=YES">

Es funktioniert genauso wie scalePageToFit in UIWebView.

Siehe : So stellen Sie die Zoom-Skala für iOS WkWebview ein

Hepsiba
quelle
1

Swift 5-Lösung:

let javaScript = """
    var meta = document.createElement('meta');
                meta.setAttribute('name', 'viewport');
                meta.setAttribute('content', 'width=device-width');
                document.getElementsByTagName('head')[0].appendChild(meta);
    """

webView.evaluateJavaScript(javaScript)
Alexander Nikolenko
quelle
0

// 100% Arbeit für mich

func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
    //print(#function)
    let scriptFontSizeAdjustment = "var style = document.createElement('style');style.innerHTML = 'body { -webkit-text-size-adjust: none; }';document.getElementsByTagName('head')[0].appendChild(style);"

    let scriptImgSizeAdjustment = "var style = document.createElement('style');style.innerHTML = 'img { display: inline;height: auto;max-width: 100%; }';document.getElementsByTagName('head')[0].appendChild(style);"

    webKitView.evaluateJavaScript(scriptFontSizeAdjustment)
    webKitView.evaluateJavaScript(scriptImgSizeAdjustment)

}
Virendra Kumar
quelle
0

Keine dieser Antworten funktionierte für mich. Ich habe versucht, eine Amazon-URL für einen bestimmten Künstler zu öffnen. Es stellt sich heraus, dass Amazon eine auf Mobilgeräte reagierende URL und eine Desktop-URL hat. Auf Desktop Safari habe ich als Benutzeragent auf iPhone gewechselt (Entwickeln> Benutzeragent> Safari - iOS 13.1.3 - iPhone) und die entsprechende URL für Mobilgeräte erhalten.

GIJoeCodes
quelle
0

Bei dieser Arbeit für mich habe ich zwei Attribute in Meta hinzugefügt : initial-scale=1.0, shrink-to-fit=yes, die helfen, Text mit HTML zu verbinden, haben ein großes Bild in HTML.

let jscript = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width, initial-scale=1.0, shrink-to-fit=yes'); document.getElementsByTagName('head')[0].appendChild(meta);"
        
let userScript = WKUserScript(source: jscript, injectionTime: .atDocumentEnd, forMainFrameOnly: true)

let wkUController = WKUserContentController()
        
wkUController.addUserScript(userScript)
        
let wkWebConfig = WKWebViewConfiguration()
        
wkWebConfig.userContentController = wkUController

self.webView = WKWebView(frame: self.view.bounds, configuration: wkWebConfig)
Diệp Lân
quelle