Программно изменить размер содержимого 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
значение.
Надеюсь, это поможет.