Équivalent WKWebView pour les échelles d'UIWebViewPageToFit


92

Je mets à jour mon application iOS pour la remplacer UIWebViewpar WKWebView. Cependant je ne comprends pas comment obtenir le même comportement avec WKWebView. Avec UIWebViewje scalesPageToFitpour assurer la pag web a été affiché avec la même taille que la taille de l' écran ( de manière à apparaître en plein écran sans défilement).

J'ai trouvé cette solution sur le Web mais cela ne fonctionne pas:

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

essayez ceci: 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];remplacez votre code par le code ci-dessus.
z22

Je l'ai essayé mais j'ai le même résultat (au fait, la méthode stringByEvaluatingJavaScriptFromString n'existe pas dans WKWebView, j'ai donc gardé mon appel
evaluJavaScript

1
avez-vous une solution?
anoop4real

Réponses:


126

vous pouvez également essayer le WKUserScript.

voici ma configuration de travail:

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

vous pouvez ajouter une configuration supplémentaire à votre WKWebViewConfiguration.


2
Fonctionne comme un charme. Merci
Nithin Pai

2
Fonctionne très bien pour moi - seul un ajustement mineur était de changer WKUserScriptInjectionTimeAtDocumentEnd en WKUserScriptInjectionTimeAtDocumentStart
sckor

1
Si je change WKUserScriptInjectionTimeAtDocumentEndde WKUserScriptInjectionTimeAtDocumentStartpuis il ne fonctionne pas pour moi. Il n'ajoute pas ce script. n'importe quelle raison?
Mahesh K

2
Bonne réponse, mais j'ajouterais aussi ce script pour éviter que le webkit ne change lui-même la taille des polices:var style = document.createElement('style');style.innerHTML = 'body { -webkit-text-size-adjust: none; }';document.getElementsByTagName('head')[0].appendChild(style);
José Manuel Sánchez

1
Cela a très bien fonctionné. J'essayais d'aligner un titre spécial avec la mise en page automatique en utilisant WKWebView. La hauteur de l'élément de offsetHeight revenait trop grande jusqu'à ce que j'ajoute ce script. Merci pour l'aide.
JamWils

44

Écho de la réponse de nferocious76, en code SWIFT: version 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)

version 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

Similaire à @ nferocious76 mais en langage 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)

Merci! cela a également résolu mon problème pour augmenter la taille de la police html, ne pas actualiser de petit à grand. J'utilise ceci pour "rafraîchir" la taille de la police du contenu et la disposition intérieure.
Nadi Hassan

12

Version C #, à utiliser dans 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);

Travaillez comme du charme!
Divyesh_08

À quoi ressemble le moteur de rendu personnalisé? En héritez-vous WkWebViewRenderer? Parce Controlque ainsi que SetNativeControl()sont inconnus ...
test le

Ok, il semble que vous deviez hériter ViewRenderer<CustomWebView, WKWebView>et utiliser OnElementChanged(ElementChangedEventArgs<CustomWebView> e).
test le

8

J'ai compris ci-dessous soultion. Pour adapter le contenu à la taille de l'appareil.

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

Solution 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

Ce travail pour moi, j'ai ajouté deux attributs dans meta:, initial-scale=1.0, shrink-to-fit=yesqui aident à ajuster le texte avec html ont une grande image 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% travaille pour moi

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

Aucune de ces réponses ne fonctionnait pour moi. J'essayais d'ouvrir une URL Amazon pour un artiste particulier. Il s'avère qu'Amazon dispose d'une URL réactive mobile et d'une URL de bureau. Sur Safari de bureau, j'ai changé pour iPhone en tant qu'agent utilisateur (Développer> Agent utilisateur> Safari - iOS 13.1.3 - iPhone) et j'ai obtenu l'URL appropriée pour le mobile.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.