Программно изменить размер содержимого WKWebView

Я добавил подпредставление WKWebView в приложение PhoneGap / Cordova 4.0+ (через cordova-plugin-wkwebview-engine) и использовал программные ограничения AutoLayout, чтобы размер WKWebView соответствовал размеру представления MainViewController.

Когда я просматриваю границы WKWebView, он совпадает с границами представления MainViewController.

Но используя Javascript для проверки размера контента, в частности, скрипт выглядит так:

var body = document.body; 
var html = document.documentElement;
Math.max(body.scrollHeight,body.offsetHeight,html.clientHeight,html.offsetHeight);

Это возвращает высоту, которая на самом деле составляет примерно от 1/2 до 2/3 от высоты границ WKWebView (на симуляторе iPad Pro я устанавливаю высоту границ на 1024,0, но Javascript сообщает, что высота содержимого составляет всего 735,0). И я показываю только половину неизменяемого контента Vue.js, который я хотел бы показать.

Поскольку я не могу показать фактический контент, с которым я работаю (NDA забавно!), Я действительно заметил, что проблема возникает с любым URL, который я передаю в WKWebView в PhoneGap/Cordova. Вот как выглядит apple.com в моем приложении: Нижний край отрезан

А вот как должна выглядеть правильная версия в Mobile Safari (работает в симуляторе):

Больше показа

Вы можете видеть, что элементы верхней панели расположены по-разному (на рабочем столе они должны иметь несколько отступов с обеих сторон окна), и в нижней части их больше, потому что внутренняя высота веб-представления выше.

Чтобы исправить мою проблему, я сделал все от перемещения экземпляра WKWebView из viewDidLoad на viewDidAppear, а также попробовал "жесткое кодирование" статического размера кадра iPad Pro, передаваемого в [WKWebView initWithFrame:], но размер контента остается на уровне 735.0. Этот же контент прекрасно (и правильно) воспроизводится как в Safari, так и в Desktop Safari.

Как заставить размер содержимого WKWebView соответствовать границам родительского представления?

Если вы хотите увидеть эту ошибку в действии на симуляторе iPad Pro, у меня есть публичное репозиторий github по адресу https://github.com/dautermann/phonegap-air. Обязательно загрузите ветку "демонстрация-выпуск".

2 ответа

Решение

Я думаю, что ваша проблема не имеет прямого отношения к WebView. Это связано с тем, что по причинам обратной совместимости "старые" приложения, работающие на iPad Pro, не получают "родное разрешение" и вместо этого используют iPad 1024x768.

Чтобы убедить Apple в том, что вы знаете об iPad Pro и его родном разрешении, нужно указать раскадровку LaunchScreen. Да, это немного удивительно, но это то, что есть (см., Например, https://forums.developer.apple.com/thread/17193). Если я изменю OTAApplication прицельтесь в своем тестовом проекте на GitHub и укажите стандарт CDVLaunchScreen как Launch Screen File у меня все отлично работает

Обновить

Согласно Force iPad Pro с полным разрешением без Launch Screen, если вы используете XCode 8, может быть достаточно просто указать Launch Image с соответствующим разрешением для iPad Pro. Хотя не пробовал.

Короткий ответ:

Вы должны проверить contentSize в вашем WKNavigationDelegate"s webView:didFinishNavigation: метод, пока здесь вы не получите только 735.0 как contentSize с вашим кодом JavaScript.

Немного больше ответа

Когда вы создаете свой WKWebView, его frame имеет такой же размер в initwithFrame"s frame, Он не меняется до тех пор, пока autolayout не заработает свою магию, а именно до viewDidLayoutSubviews метод в вашем UIViewController,

На данный момент у вас есть WKWebView который охватывает основной вид, но ваш сайт contentSize это не то, что вы ожидали. Потому что вашего сайта еще нет.

Вам нужно установить webView.navigationDelegate = {delegate} слушать навигационные события. Ваш сайт там не на 100% до delegate вызывается через webView:didFinishNavigation: метод. Отныне вы можете измерить ожидаемый contentSize значение.

Надеюсь, это поможет.

Другие вопросы по тегам