UIWebViewのscalesPageToFitに相当するWKWebView


92

iOSアプリをに置き換えるように更新してUIWebViewWKWebViewます。ただし、で同じ動作を実現する方法がわかりませんWKWebViewUIWebView私は使用scalesPageToFit(スクロールせずにフルスクリーンで表示されるように)ウェブPAGは、画面サイズと同じサイズで表示されたことを確認します。

私はその解決策をウェブ上で見つけましたが、うまくいきません:

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

これを試してください: 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];コードを上記のコードに置き換えます。
z22 2014年

私は試してみましたが、同じ結果が得られました(ちなみに、stringByEvaluatingJavaScriptFromStringメソッドはWKWebViewに存在しないため、evaluateJavaScript:completionHandler呼び出しを保持しました
olinsha

1
あなたは解決策を手に入れましたか?
anoop4real 2017年

回答:


126

WKUserScriptを試すこともできます。

ここに私の作業設定があります:

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

WKWebViewConfigurationに構成を追加できます。


2
魅力のように機能します。ありがとう
Nithin Pai 2015

2
私にとってはうまくいきます-わずかな調整だけがWKUserScriptInjectionTimeAtDocumentEndをWKUserScriptInjectionTimeAtDocumentStartに変更することでした
sckor

1
に変更WKUserScriptInjectionTimeAtDocumentEndするとWKUserScriptInjectionTimeAtDocumentStart、うまくいきません。このスクリプトは追加されません。何らかの理由?
Mahesh K 2016

2
いい答えですが、次のスクリプトも追加して、Webkit自体がフォントサイズを変更しないようにします。var style = document.createElement('style');style.innerHTML = 'body { -webkit-text-size-adjust: none; }';document.getElementsByTagName('head')[0].appendChild(style);
JoséManuelSánchez16年

1
これはうまくいきました。WKWebViewを使用して、特別なタイトルを自動レイアウトに揃えようとしました。このスクリプトを追加するまで、offsetHeightからの要素の高さが大きくなりすぎました。助けてくれてありがとう。
JamWils 2016

44

nferocious76の答えのエコー、迅速なコード: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)

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

@ nferocious76に似ていますが、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)

ありがとう!これはまた、htmlフォントサイズを大きくするという私の問題を解決し、小さなフォントから大きなフォントに更新されませんでした。これを使用して、コンテンツのフォントサイズと内部レイアウトを「更新」します。
ナンディハッサン

12

Xamarinカスタムレンダラーで使用するC#バージョン:

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

魅力のように動作します!
Divyesh_08

カスタムレンダラーはどのように見えますか?から継承しWkWebViewRendererますか?そのためControlだけでなく、SetNativeControl()...不明である
テスト

継承しViewRenderer<CustomWebView, WKWebView>て使用する必要があるようOnElementChanged(ElementChangedEventArgs<CustomWebView> e)です。
テスト

8

私は魂の下で理解しました。デバイスのサイズに合わせてコンテンツを作成するため。

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

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

この作業は私にとって、メタに2つの属性を追加しました。これinitial-scale=1.0, shrink-to-fit=yesは、テキストをhtmlに適合させるのに役立ち、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%私のために働く

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

この答えのどれも私のために働いていませんでした。特定のアーティストのAmazon URLを開こうとしました。AmazonにはモバイルレスポンシブURLとデスクトップURLがあることがわかりました。デスクトップのSafariでは、ユーザーエージェントとしてiPhoneに変更し([開発]> [ユーザーエージェント]> [Safari-iOS 13.1.3-iPhone])、モバイル用の適切なURLを取得しました。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.