Odpowiednik WKWebView dla scalesPageToFit UIWebView

97

Aktualizuję aplikację na iOS, aby zastąpić UIWebViewWKWebView. Jednak nie rozumiem, jak osiągnąć to samo zachowanie z WKWebView. Z UIWebViewużyłem scalesPageToFitaby zapewnić pag WWW był wyświetlany z takim samym rozmiarze jak wielkość ekranu (tak, aby pojawić się na pełnym ekranie bez przewijania).

Znalazłem to rozwiązanie w sieci, ale nie działa:

- (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
źródło
spróbuj tego: 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];zamień swój kod na powyższy kod.
z22
Spróbowałem, ale mam ten sam wynik (przy okazji, metoda stringByEvaluatingJavaScriptFromString nie istnieje w WKWebView, więc zachowałem wywołanie
EvaluationJavaScript: CompleteHandler
1
dostałeś rozwiązanie?
anoop4real

Odpowiedzi:

128

możesz również wypróbować WKUserScript.

oto moja robocza konfiguracja:

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

możesz dodać dodatkową konfigurację do swojego WKWebViewConfiguration.

NFerocious
źródło
2
Działa jak marzenie. Dzięki
Nithin Pai
2
Działa świetnie - tylko drobne poprawki zmieniły WKUserScriptInjectionTimeAtDocumentEnd na WKUserScriptInjectionTimeAtDocumentStart
sckor
1
Jeśli zmienię WKUserScriptInjectionTimeAtDocumentEndsię WKUserScriptInjectionTimeAtDocumentStart, to nie działa dla mnie. Nie dodaje tego skryptu. jakiegokolwiek powodu?
Mahesh K
2
Dobra odpowiedź, ale dodałbym również ten skrypt, aby uniknąć zmiany rozmiaru czcionek przez Webkit:var style = document.createElement('style');style.innerHTML = 'body { -webkit-text-size-adjust: none; }';document.getElementsByTagName('head')[0].appendChild(style);
José Manuel Sánchez
1
Wyszło świetnie. Próbowałem wyrównać specjalny tytuł z Auto Layout przy użyciu WKWebView. Wysokość elementu z offsetHeight wracała zbyt duża, dopóki nie dodałem tego skryptu. Dzięki za pomoc.
JamWils
44

Echo odpowiedzi nferocious76 w kodzie swift: wersja Swift2.x.

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)

wersja swift3

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
źródło
20

Podobny do @ nferocious76, ale w języku Swift

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
źródło
Dzięki! to również rozwiązało mój problem z powiększaniem rozmiaru czcionki html, nie odświeżaniem od małego do dużego. Używam tego do "odświeżenia" rozmiaru czcionki treści i wewnętrznego układu.
Nadi Hassan
12

Wersja C # do użytku w module renderującym niestandardowym platformy Xamarin:

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);
Ognia
źródło
Działaj jak urok!
Divyesh_08
Jak wygląda niestandardowy moduł renderujący? Czy dziedziczysz po WkWebViewRenderer? Bo Controljak również SetNativeControl()nieznane ...
testowanie
Wygląda na to, że musisz dziedziczyć ViewRenderer<CustomWebView, WKWebView>i używać OnElementChanged(ElementChangedEventArgs<CustomWebView> e).
testowanie
11

Odkryłem poniżej soultion. Dopasowanie treści do rozmiaru urządzenia.

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
źródło
6

Dodanie poniższego tekstu do mojego skryptu HTML pomogło mi.

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

Robi to samo, co scalePageToFit w UIWebView.

patrz: Jak ustawić skalę zoomu WkWebview w iOS

Hepsiba
źródło
1

Rozwiązanie Swift 5:

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)
Aleksandra Nikolenko
źródło
1

W tej pracy dla mnie dodałem dwa atrybuty w meta:, initial-scale=1.0, shrink-to-fit=yesktóre pomagają dopasować tekst do html mają duży obraz w 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
źródło
0

// 100% działa dla mnie

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
źródło
0

Żadna z tych odpowiedzi nie działała dla mnie. Próbowałem otworzyć adres URL Amazon dla konkretnego artysty. Okazuje się, że Amazon ma mobilny responsywny adres URL i adres URL komputera. W przeglądarce Safari na komputer zmieniłem na iPhone'a jako klienta użytkownika (Develop> User Agent> Safari - iOS 13.1.3 - iPhone) i otrzymałem odpowiedni adres URL dla urządzeń mobilnych.

GIJoeCodes
źródło