Сделать WKWebview "настоящим" полноэкранным на iPhone X (удалить безопасную область из WKWebView

Question

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

Это текущая ситуация, с которой я сталкиваюсь, когда устанавливаю WebView в границы суперпредставлений: Красная граница - это граница веб-вида (также размер экрана). Твиттер имеет 100% высоту и ширину на теле.

Я понимаю, что веб-сайты не могут иметь ширину 100% в Safari и что поведение в браузере приложений по умолчанию учитывает safearea, но особенно в моем случае, когда веб-страницы в некоторой степени предназначены для приложения, мне нужно использовать полную пространство.

Я не мог понять, как настроить веб-просмотр, чтобы придать его контенту полный размер. Есть ли способ изменить safearea?

Фрагмент кода:

private var webView : WKWebView!

override func viewDidLoad() {
    super.viewDidLoad()

    self.webView = WKWebView(frame: .zero)

    self.webView.layer.borderColor = UIColor.red.cgColor
    self.webView.layer.borderWidth = 2

    self.webView.load(URLRequest(url: URL(string: "https://www.twitter.com")!))

    self.view.addSubview(self.webView)
}

override func viewDidLayoutSubviews() {
    self.webView.frame = self.view.bounds
}

Answer 1

После небольшой попытки и ошибки, это решение, которое я придумал. Подкласс WKWebView и создать собственный класс. затирать safeAreaInsets:

import Foundation
import WebKit

class FullScreenWKWebView: WKWebView {
    override var safeAreaInsets: UIEdgeInsets {
        return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    }
}

Answer 2

Вот еще одно решение без переопределения и выполнения javascript:

webView.scrollView.contentInsetAdjustmentBehavior = .never

В моем случае это сработало отлично.

Answer 3

Вы также можете расширить safeAreaInsets из WKWebView.

extension WKWebView {
    override open var safeAreaInsets: UIEdgeInsets {
        return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    }
}

Answer 4

Вместо этого используйте ограничения AutoLayout:

NSLayoutConstraint.activate([
    webView.topAnchor.constraint(equalTo: view.topAnchor),
    webView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
    webView.leftAnchor.constraint(equalTo: view.leftAnchor),
    webView.rightAnchor.constraint(equalTo: view.rightAnchor)
])

Не забудьте добавить viewport-fit=cover к метатегу области просмотра вашей веб-страницы и используйте новые переменные Safari, чтобы добавить отступы к своему контенту, чтобы убедиться, что он учитывает безопасные области.

/* iOS 11 */
constant(safe-area-inset-*);
/* iOS 11.2 */
env(safe-area-inset-*);

редактировать

Я также изучал варианты добавления метатега без каких-либо изменений на реальной веб-странице. Если я правильно помню, мне удалось добавить метатег через Swift со следующим фрагментом кода:

webView.evaluateJavascript("document.querySelector('meta[name=viewport]').content = document.querySelector('meta[name=viewport]').content + ', viewport-fit=cover'", completionHandler: nil)

Это для использования в WKWebView Кстати, и вам нужно будет выполнить его после загрузки веб-страницы, очевидно. Также, вероятно, следует выполнить некоторую обработку ошибок, так как это вызовет исключение, если метатег назван viewport отсутствует, и контент будет , viewport-fit=cover если содержимое пусто для начала.

Answer 5

Просто добавьте мета-элемент в заголовок своей веб-страницы "viewport-fit=cover"

нравится:

meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,viewport-fit=cover"

Answer 6

Для Objective C попробуйте этот код -

-(void) willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
   if (@available(iOS 11.0, *)) {
       if(toInterfaceOrientation == UIInterfaceOrientationPortrait){
          _webView.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentAlways;
       }else{
          _webView.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentScrollableAxes;
       }
   }
}