É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];
}
olinsha
la source
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.

NFerocious
la source
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)
air_bob
la source
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)
Efe Ariaroo
la source
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);
feu dans le trou
la source
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)
}
Ankita
la source
6

L'ajout de ce qui suit à mon script HTML m'a aidé.

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

Il fait la même chose que scalePageToFit dans UIWebView.

Référez-vous: Comment définir l'échelle de zoom iOS WkWebview

Hepsiba
la source
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)
Alexandre Nikolenko
la source
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)
Diệp Lân
la source
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)

}
Virendra Kumar
la source
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.

GIJoeCodes
la source