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

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

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

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

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

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

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
}

person j0h4nn3s    schedule 11.11.2017    source источник
comment
Вероятный дубликат stackoverflow.com/ вопросы/47134329/   -  person matt    schedule 12.11.2017
comment
Также, вероятно, дубликат stackoverflow.com/questions/46232812/   -  person matt    schedule 12.11.2017
comment
Я пытаюсь найти решение, при котором мне не нужно менять HTML-код веб-сайтов.   -  person j0h4nn3s    schedule 12.11.2017
comment
Я понимаю, но дело в том, что Stack Overflow знает о проблеме, и ваш повторный вопрос ничего не добавляет к миксу. Если она еще не решена, она не будет решена сейчас, потому что вы спрашиваете снова. Если вы считаете, что у вас есть законный вариант использования и что Apple поступает неправильно, я настоятельно рекомендую подать отчет об ошибке.   -  person matt    schedule 12.11.2017
comment
Возможный дубликат приложения Cordova неправильно отображается на iPhone X (симулятор)   -  person Vinodh    schedule 12.11.2017


Ответы (6)


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

import Foundation
import WebKit

class FullScreenWKWebView: WKWebView {
    override var safeAreaInsets: UIEdgeInsets {
        return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    }
}
person j0h4nn3s    schedule 13.11.2017
comment
Вы также можете просто вернуть вставки zero - person Dimitris; 25.01.2018
comment
Спасибо, это сделало мой день! - person Gema Megantara; 10.12.2018
comment
Вы также можете просто добавить расширение для веб-просмотра на контроллере представления, в котором вы хотите, чтобы веб-просмотр перешел в безопасную зону: extension WKWebView{ override open var safeAreaInsets: UIEdgeInsets { return UIEdgeInsets(top: 0, left: 0, bottom: 0, справа: 0) } } - person Austin; 15.02.2019

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

webView.scrollView.contentInsetAdjustmentBehavior = .never

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

Цель-c версия:

[webView.scrollView setContentInsetAdjustmentBehavior: UIScrollViewContentInsetAdjustmentNever];
person sunnyday    schedule 04.09.2020
comment
Это правильный способ включения и выключения вставок безопасной области. - person Leon; 06.10.2020

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

extension WKWebView {
    override open var safeAreaInsets: UIEdgeInsets {
        return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    }
}
person quemeful    schedule 14.12.2017
comment
Это неопределенное поведение. Вы действительно не должны переопределять существующие методы в расширениях. См., например. этот ответ. - person fishinear; 21.12.2017
comment
странно, что нет предупреждений компилятора, если это то, что нельзя сделать (по вашей ссылке там) - person quemeful; 23.12.2017
comment
@quemeful это можно сделать, если вы сделаете это только один раз. Если вы сделаете это дважды, то неизвестно, какой из них будет применяться. Также, не видя исходный код метода родительского класса, невозможно понять, не упустили ли вы что-то важное. Эти две причины объясняют, почему этого делать не следует, хотя технически это работает. - person Abhi Beckert; 06.04.2018

Вместо этого используйте ограничения 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, если содержимое изначально пусто.

person anders    schedule 13.11.2017
comment
установка ограничения веб-просмотра или WKWebView не помогает. Это ничего не меняет, когда он уже полноэкранный. Добавление «viewport-fit=cover» работает, но, как указано выше, я ищу быстрое решение без изменения веб-страницы. - person j0h4nn3s; 15.11.2017
comment
Я вижу эту работу, но мне все же больше нравится мой подход в моем случае использования. - person j0h4nn3s; 21.11.2017

Для цели 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;
       }
   }
}
person Clement Joseph    schedule 30.12.2019

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

как это:

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