Еквівалент WKWebView для масштабу UIWebView scalesPageToFit


96

Я оновлюю свою програму iOS для заміни UIWebViewна WKWebView. Однак я не розумію, як досягти такої самої поведінки WKWebView. З UIWebViewя використовувавscalesPageToFit забезпечити веб - віл був показаний з тим же розміром, що і розміром екрана (так, щоб з'явитися на весь екран без прокрутки).

Я знайшов це рішення в Інтернеті, однак воно не працює:

- (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

Я спробував, але у мене такий же результат (до речі, метод stringByEvaluatingJavaScriptFromString не існує в WKWebView, тому я зберіг свій дзвінок
evaluJavaScript: completeHandler

1
ти отримав рішення?
anoop4real

Відповіді:


128

Ви також можете спробувати 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
Працює як шарм. Дякую
Нітін Пай

2
Для мене чудово працює - лише незначний твік змінив WKUserScriptInjectionTimeAtDocumentEnd на WKUserScriptInjectionTimeAtDocumentStart
sckor

1
Якщо я перейду WKUserScriptInjectionTimeAtDocumentEndна, WKUserScriptInjectionTimeAtDocumentStartце не працює для мене. Він не додає цей сценарій. будь-яка причина?
Махеш К

2
Приємна відповідь, але я б також додав цей сценарій, щоб уникнути самостійного зміни розміру шрифту:var style = document.createElement('style');style.innerHTML = 'body { -webkit-text-size-adjust: none; }';document.getElementsByTagName('head')[0].appendChild(style);
Хосе Мануель Санчес

1
Це вдалось чудово. Я намагався вирівняти спеціальний заголовок із Auto Layout за допомогою WKWebView. Висота елемента від offsetHeight продовжувала повертатися занадто великою, поки я не додав цей сценарій. Дякую за допомогу.
JamWils

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's, але мовою 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

Версія C #, для використання у спеціальному візуалізаторі Xamarin:

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).
тестування

10

Я зрозумів це нижче. Для пристосування вмісту до розміру пристрою.

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

Ця робота для мене, я додав два атрибути в мета:, 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

Жодна з цих відповідей не працювала для мене. Я намагався відкрити URL-адресу Amazon для певного виконавця. Виявляється, Amazon має мобільну адаптивну URL-адресу та URL-адресу для робочого столу. У настільному Safari я перейшов на iPhone як агент користувача (Розробка> Агент користувача> Safari - iOS 13.1.3 - iPhone) і отримав відповідну URL-адресу для мобільних пристроїв.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.