WKWebView setara untuk scalePageToFit UIWebView

97

Saya memperbarui aplikasi iOS saya untuk menggantikan UIWebViewdengan WKWebView. Namun saya tidak mengerti bagaimana mencapai perilaku yang sama dengan WKWebView. Dengan UIWebViewsaya biasa scalesPageToFitmemastikan halaman web ditampilkan dengan ukuran yang sama dengan ukuran layar (sehingga tampil layar penuh tanpa menggulir).

Saya menemukan solusi itu di web tetapi tidak berhasil:

- (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
sumber
coba ini: 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];ganti kode Anda dengan kode di atas.
z22
Saya mencobanya tetapi saya memiliki hasil yang sama (omong-omong, metode stringByEvaluatingJavaScriptFromString tidak ada di WKWebView jadi saya tetap menggunakan panggilan
evaluJavaScript
1
apakah kamu mendapatkan solusi?
anoop4real

Jawaban:

128

Anda juga dapat mencoba WKUserScript.

inilah konfigurasi kerja saya:

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

Anda dapat menambahkan konfigurasi tambahan ke WKWebViewConfiguration Anda.

NFerocious
sumber
2
Bekerja seperti pesona. Terima kasih
Nithin Pai
2
Bekerja sangat baik untuk saya - hanya perubahan kecil yang mengubah WKUserScriptInjectionTimeAtDocumentEnd menjadi WKUserScriptInjectionTimeAtDocumentStart
sckor
1
Jika saya berubah WKUserScriptInjectionTimeAtDocumentEndmenjadi WKUserScriptInjectionTimeAtDocumentStartmaka itu tidak berhasil untuk saya. Itu tidak menambahkan skrip ini. alasan apapun?
Mahesh K
2
Jawaban bagus, tetapi saya juga akan menambahkan skrip ini untuk menghindari webkit mengubah ukuran font dengan sendirinya:var style = document.createElement('style');style.innerHTML = 'body { -webkit-text-size-adjust: none; }';document.getElementsByTagName('head')[0].appendChild(style);
José Manuel Sánchez
1
Ini berhasil dengan baik. Saya mencoba menyelaraskan judul khusus dengan Tata Letak Otomatis menggunakan WKWebView. Tinggi elemen dari offsetHeight terus kembali terlalu besar sampai saya menambahkan skrip ini. Terima kasih untuk bantuannya.
JamWils
44

Gema jawaban nferocious76, dalam kode cepat: versi 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 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
sumber
20

Mirip dengan @ nferocious76 tetapi dalam bahasa 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
sumber
Terima kasih! ini juga menyelesaikan masalah saya untuk membuat ukuran font html menjadi lebih besar, tidak menyegarkan dari kecil ke besar. Saya menggunakan ini untuk "menyegarkan" ukuran font konten dan tata letak bagian dalam.
Nadi Hassan
12

Versi C #, untuk digunakan di 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);
api di dalam lubang
sumber
Bekerja seperti pesona!
Divyesh_08
Bagaimana tampilan custom renderer? Apakah Anda mewarisi dari WkWebViewRenderer? Karena Controldan juga SetNativeControl()yang tidak diketahui ...
menguji
Ok tampaknya Anda perlu mewarisi dari ViewRenderer<CustomWebView, WKWebView>dan menggunakan OnElementChanged(ElementChangedEventArgs<CustomWebView> e).
menguji
11

Saya menemukan di bawah soultion. Untuk membuat konten agar sesuai dengan ukuran perangkat.

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
sumber
6

Menambahkan di bawah ini ke skrip HTML membantu saya.

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

Itu sama seperti scalePageToFit di UIWebView.

lihat: Cara mengatur skala zoom iOS WkWebview

Hepsiba
sumber
1

Solusi 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)
Alexander Nikolenko
sumber
1

Ini berfungsi untuk saya, saya menambahkan dua atribut di meta:, initial-scale=1.0, shrink-to-fit=yesyang membantu menyesuaikan teks dengan html memiliki gambar besar di 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
sumber
0

// 100% berhasil untukku

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
sumber
0

Tak satu pun dari jawaban ini berhasil untuk saya. Saya mencoba membuka URL Amazon untuk artis tertentu. Ternyata Amazon memiliki URL responsif seluler dan URL desktop. Pada Safari desktop, saya mengganti iPhone sebagai agen pengguna (Kembangkan> Agen Pengguna> Safari - iOS 13.1.3 - iPhone) dan mendapatkan URL yang sesuai untuk seluler.

GIJoeCodes
sumber