Equivalente de WKWebView para escalasPageToFit de UIWebView


92

Estou atualizando meu aplicativo iOS para substituir UIWebViewcom WKWebView. Porém, não entendo como conseguir o mesmo comportamento com WKWebView. Com UIWebViewI costumava scalesPageToFitgarantir que a página da web fosse exibida com o mesmo tamanho da tela (de modo a aparecer em tela inteira sem rolar).

Encontrei essa solução na web, mas ela não funciona:

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

tente isto: 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];substitua seu código pelo código acima.
z22 de

Eu tentei, mas obtive o mesmo resultado (a propósito, o método stringByEvaluatingJavaScriptFromString não existe em WKWebView, então mantive meu
EvaluationJavaScript

1
você conseguiu uma solução?
anoop4real

Respostas:


126

você também pode tentar o WKUserScript.

aqui está minha configuração de trabalho:

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

você pode adicionar configuração adicional ao seu WKWebViewConfiguration.


2
Funciona como um encanto. Obrigado
Nithin Pai

2
Funciona muito bem para mim - apenas um pequeno ajuste foi alterar WKUserScriptInjectionTimeAtDocumentEnd para WKUserScriptInjectionTimeAtDocumentStart
sckor

1
Se eu mudar WKUserScriptInjectionTimeAtDocumentEndpara WKUserScriptInjectionTimeAtDocumentStart, não funcionará para mim. Não adiciona este script. qualquer razão?
Mahesh K

2
Boa resposta, mas eu também adicionaria este script para evitar que o webkit altere os tamanhos das fontes por si só:var style = document.createElement('style');style.innerHTML = 'body { -webkit-text-size-adjust: none; }';document.getElementsByTagName('head')[0].appendChild(style);
José Manuel Sánchez

1
Isso funcionou muito bem. Eu estava tentando alinhar um título especial com Layout automático usando WKWebView. A altura do elemento de offsetHeight continuava voltando muito grande até eu adicionar este script. Obrigado pela ajuda.
JamWils

44

Eco da resposta de nferocious76, em código swift: versão 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)

versão 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)

20

Semelhante a @ nferocious76, mas em linguagem 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)

Obrigado! isso também resolveu meu problema de fazer o tamanho da fonte html ficar maior, não atualizar do pequeno para o grande. Estou usando isso para "atualizar" o tamanho da fonte do conteúdo e o layout interno.
Nadi Hassan

12

Versão C #, para uso no 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);

Trabalhe como charme!
Divyesh_08

Como é o renderizador personalizado? Você está herdando de WkWebViewRenderer? Porque Controlassim como SetNativeControl()são desconhecidos ...
teste em

Ok, parece que você precisa herdar ViewRenderer<CustomWebView, WKWebView>e usar OnElementChanged(ElementChangedEventArgs<CustomWebView> e).
teste em

8

Eu descobri abaixo da alma. Para fazer com que o conteúdo se ajuste ao tamanho do dispositivo.

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


1

Solução 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)

1

Este trabalho para mim, adicionei dois atributos no meta:, initial-scale=1.0, shrink-to-fit=yesque ajudam a ajustar o texto com html e ter uma imagem grande em 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)

0

// 100% trabalho para mim

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)

}

0

Nenhuma dessas respostas estava funcionando para mim. Eu estava tentando abrir um URL da Amazon para um determinado artista. Acontece que a Amazon tem uma URL responsiva móvel e uma URL desktop. No Safari para desktop, mudei para o iPhone como user-agent (Develop> User Agent> Safari - iOS 13.1.3 - iPhone) e obtive o URL apropriado para celular.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.