Эквивалент WKWebView для UIWebView scalePageToFit

Я обновляю свое приложение для 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];
}

person olinsha    schedule 10.10.2014    source источник
comment
попробуйте следующее: 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]; замените свой код приведенным выше кодом.   -  person z22    schedule 10.10.2014
comment
Я попробовал, но у меня тот же результат (кстати, метод stringByEvaluatingJavaScriptFromString не существует в WKWebView, поэтому я сохранил свой вызов evalJavaScript: completionHandler   -  person olinsha    schedule 10.10.2014
comment
ты нашел решение?   -  person anoop4real    schedule 24.05.2017


Ответы (11)


вы также можете попробовать 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.

person NFerocious    schedule 27.10.2014
comment
Работает как шарм. Спасибо - person Nithin Pai; 26.03.2015
comment
Отлично работает для меня - только незначительная настройка изменила WKUserScriptInjectionTimeAtDocumentEnd на WKUserScriptInjectionTimeAtDocumentStart - person sckor; 31.03.2015
comment
Если я изменю WKUserScriptInjectionTimeAtDocumentEnd на WKUserScriptInjectionTimeAtDocumentStart, то у меня это не сработает. Он не добавляет этот сценарий. какой-либо причине? - person Mahesh K; 03.05.2016
comment
вам следует проверить наличие других сценариев, которые могут перезаписывать ваш собственный сценарий. - person NFerocious; 04.05.2016
comment
Хороший ответ, но я бы также добавил этот скрипт, чтобы webkit не менял размеры шрифтов сам по себе: var style = document.createElement('style');style.innerHTML = 'body { -webkit-text-size-adjust: none; }';document.getElementsByTagName('head')[0].appendChild(style); - person José Manuel Sánchez; 12.05.2016
comment
@MahmoudAdam, что значит, он не работает с iOS9? На самом деле я все еще использую это в быстрой конфигурации. И нет, эта конфигурация будет работать только для iOS8 и более поздних версий, iOS7 и более ранние версии не имеют фреймворка webkit. - person NFerocious; 14.06.2016
comment
@ nferocious76, когда я устанавливаю device-height & device-width, он не работает с iOS9, но когда я отправляю им точные числа, он работает. Также есть ли у вас идея поддерживать разные ориентации? - person Mahmoud Adam; 14.06.2016
comment
@MahmoudAdam, вы должны учитывать время инъекции и 'nitWithFrame:' вашего wkwebview - person NFerocious; 14.06.2016
comment
Это отлично сработало. Я пытался выровнять специальный заголовок с помощью Auto Layout с помощью WKWebView. Высота элемента из offsetHeight снова становилась слишком большой, пока я не добавил этот скрипт. Спасибо за помощь. - person JamWils; 17.12.2016
comment
Я столкнулся с некоторыми проблемами на iPad iOS8. - person Timur Bernikovich; 02.02.2017
comment
Похоже, нам нужно изменить device-width на =device-height в альбомной ориентации на iOS. - person Timur Bernikovich; 02.02.2017
comment
@TimurBernikowich нет .. просто добавить поддержку обработки ориентации изменено. и эти два значения должны поменяться местами ... в этой заметке, с какими проблемами вы столкнулись? - person NFerocious; 03.02.2017
comment
@ nferocious76 вы можете предоставить образец? Я попытался открыть свой VC с веб-просмотром в наземном пространстве без каких-либо вращений, но он по-прежнему выглядит некорректно. (ширина ограничена шириной портретного устройства) - person Timur Bernikovich; 03.02.2017
comment
@ nferocious76 Это решение отлично работает, когда в моем URL-адресе loadRequest есть только текстовое содержимое. Но когда в URL-адресе есть и изображение, и текст, тогда изображение выглядит правильно, но размер текста меньше. - person Vivek Shah; 25.05.2017
comment
@VivekShah вам, вероятно, понадобится добавить конфигурацию для ваших размеров шрифта. - person NFerocious; 25.05.2017
comment
Идеально. Спасибо @ nferocious76. - person arango_86; 20.06.2017

Эхо ответа 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)
person air_bob    schedule 27.11.2016

Подобно @ 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)
person Efe Ariaroo    schedule 17.06.2016
comment
Спасибо! это также решило мою проблему, чтобы увеличить размер шрифта html, не обновляясь от маленького до большого. Я использую это, чтобы обновить размер шрифта контента и внутренний макет. - person Nadi Hassan; 25.07.2017

Версия C # для использования в 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);
person fire in the hole    schedule 27.03.2017
comment
Работайте как шарм! - person Divyesh_08; 17.07.2020
comment
Как выглядит настраиваемый рендерер? Вы наследуете от WkWebViewRenderer? Потому что Control, а также SetNativeControl() неизвестны ... - person testing; 24.07.2020
comment
Хорошо, похоже, вам нужно унаследовать от ViewRenderer<CustomWebView, WKWebView> и использовать OnElementChanged(ElementChangedEventArgs<CustomWebView> e). - person testing; 24.07.2020

Я разобрался ниже соула. Чтобы контент соответствовал размеру устройства.

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)
}
person Ankita    schedule 30.08.2019
comment
Это единственное, что у меня сработало, большое спасибо - person user2501116; 04.12.2020

Мне помогло добавление приведенного ниже кода в мой HTML-скрипт.

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

Он делает то же самое, что и scalePageToFit в UIWebView.

см .: Как установить масштаб iOS WkWeb / а>

person Hepsiba    schedule 21.01.2020

Решение 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)
person Alexander Nikolenko    schedule 03.04.2020

Ни один из этих ответов не работал у меня. Я пытался открыть URL-адрес Amazon для определенного исполнителя. Оказывается, у Amazon есть мобильный отзывчивый URL-адрес и URL-адрес рабочего стола. На настольном Safari я перешел на iPhone в качестве пользовательского агента (Разработка ›Пользовательский агент› Safari - iOS 13.1.3 - iPhone) и получил соответствующий URL-адрес для мобильных устройств.

person GIJoeCodes    schedule 09.07.2020

Эта работа для меня, я добавил два атрибута в мета: 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)
person Diệp Lân    schedule 19.08.2020

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

}
person Virendra Kumar    schedule 03.06.2020

Это работает для меня, чтобы соответствовать размеру изображения в пределах ширины устройства для Swift 5
Полезно с динамическим HTML с сервера

func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
   
    let fontAdjust = "var style = document.createElement('style');style.innerHTML = 'body { -webkit-text-size-adjust: none; }';document.getElementsByTagName('head')[0].appendChild(style);"

    let imgAdjust = "var style = document.createElement('style');style.innerHTML = 'img { display: inline;height: auto;max-width: 100%; }';document.getElementsByTagName('head')[0].appendChild(style);"
webKitView.evaluateJavaScript(imgAdjust)

    webKitView.evaluateJavaScript(fontAdjust)
    webKitView.evaluateJavaScript(imgAdjust)
}

person pkandhari99    schedule 30.01.2021