Equivalente de WKWebView para scalePageToFit de UIWebView


97

Estoy actualizando mi aplicación iOS para reemplazar UIWebViewcon WKWebView. Sin embargo, no entiendo cómo lograr el mismo comportamiento con WKWebView. Con UIWebViewsolía scalesPageToFitasegurarme de que la página web se mostrara con el mismo tamaño que el tamaño de la pantalla (para que aparezca en pantalla completa sin desplazarse).

Encontré esa solución en la web, sin embargo, no 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];
}

intente esto: 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];reemplace su código con el código anterior.
z22

Lo intenté, pero tengo el mismo resultado (por cierto, el método stringByEvaluatingJavaScriptFromString no existe en WKWebView, así que mantuve mi evaluación de
JavaScript

1
¿Obtuviste una solución?
anoop4real

Respuestas:


128

también puede probar el WKUserScript.

aquí está mi configuración de trabajo:

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

puede agregar configuración adicional a su WKWebViewConfiguration.


2
Funciona de maravilla. Gracias
Nithin Pai

2
Funciona muy bien para mí: solo un pequeño ajuste fue cambiar WKUserScriptInjectionTimeAtDocumentEnd a WKUserScriptInjectionTimeAtDocumentStart
sckor

1
Si cambio WKUserScriptInjectionTimeAtDocumentEnda WKUserScriptInjectionTimeAtDocumentStart, no me funciona. No agrega este script. ¿cualquier razón?
Mahesh K

2
Buena respuesta, pero también agregaría este script para evitar que webkit cambie los tamaños de fuente por sí solo:var style = document.createElement('style');style.innerHTML = 'body { -webkit-text-size-adjust: none; }';document.getElementsByTagName('head')[0].appendChild(style);
José Manuel Sánchez

1
Esto funcionó muy bien. Estaba tratando de alinear un título especial con Auto Layout usando WKWebView. La altura del elemento de offsetHeight seguía volviendo demasiado grande hasta que agregué este script. Gracias por la ayuda.
JamWils

44

Eco de la respuesta de nferocious76, en código swift: versión 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)

versión 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

Similar a @ nferocious76 pero en lenguaje 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)

¡Gracias! esto también resolvió mi problema para hacer que el tamaño de fuente html se hiciera más grande, no se actualizaba de pequeño a grande. Estoy usando esto para "actualizar" el tamaño de fuente del contenido y el diseño interno.
Nadi Hassan

12

Versión C #, para usar en 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);

¡Trabaja como el encanto!
Divyesh_08

¿Cómo se ve el renderizador personalizado? ¿Heredas de WkWebViewRenderer? Porque Controlasí como SetNativeControl()son desconocidos ...
prueba

Ok, parece que necesitas heredar ViewRenderer<CustomWebView, WKWebView>y usar OnElementChanged(ElementChangedEventArgs<CustomWebView> e).
prueba el

11

Me di cuenta de debajo del alma. Para hacer que el contenido se ajuste al tamaño del 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

Solución 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 trabajo para mí, agregué dos atributos en meta:, initial-scale=1.0, shrink-to-fit=yesque ayudan a ajustar el texto con html a tener una imagen grande en 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% trabajo para mi

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

Ninguna de estas respuestas me funcionó. Estaba intentando abrir una URL de Amazon para un artista en particular. Resulta que Amazon tiene una URL de respuesta móvil y una URL de escritorio. En Safari de escritorio, cambié a iPhone como agente de usuario (Desarrollar> Agente de usuario> Safari - iOS 13.1.3 - iPhone) y obtuve la URL adecuada para dispositivos móviles.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.