it-swarm.com.ru

WKWebView проблема высоты страницы на iPhone X

Я считаю, что если я использую WKWebView с 

viewport-fit=cover

а также 

body :{height:100%}

высота html тела до сих пор не может достигнуть нижней части iPhone X и равна высоте safeArea, однако фоновый цвет может охватывать весь экран.

https://ue.qzone.qq.com/touch/proj-qzone-app/test.html

Я загружаю эту страницу в полноэкранном режиме WKWebView, чтобы воспроизвести проблему.

7
WATER1350

Мне удалось исправить проблему с (ObjC/Swift):

if (@available(iOS 11.0, *)) {
  webView.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
}

или же

if #available(iOS 11.0, *) {
    webView.scrollView.contentInsetAdjustmentBehavior = .never;
}

Похоже, что этот параметр имеет тот же эффект, что и viewport-fit=cover, поэтому, если вы знаете, что ваш контент использует свойство, вы можете исправить ошибку следующим образом.

CSS-объявления env(safe-area-inset-top) по-прежнему работают должным образом. WKWebView автоматически определяет, когда его область просмотра пересекается с заблокированными областями, и устанавливает соответствующие значения.

Документация для contentInsetAdjustmentBehavior и его значений параметров и благодарю @dpogue за ответ, где я нашел решение.

11
Sampo

В вашем коде, если вы добавите 

opacity: 0.5; 

к тегам html и body вы увидите, что тег body занимает весь экран, в то время как высота тега html равна высоте безопасной зоны. 

Если вы просто хотите, чтобы html-область доходила до краев, вы можете явно указать: 

<html style='height: 812px;'>

Это позволит контенту в html должным образом уместиться на весь экран, если вы также добавите: 

<meta name="viewport" content="initial-scale=1.0, viewport-fit=cover">

Не самое элегантное решение, конечно, но оно работает. 

1
Samantha John

Я обнаружил, что установочная высота в CSS для элемента html работает height: 100vh (а не height: 100%)

1
Adam Heath

Я сталкиваюсь с этой проблемой в моем приложении Cordova.

Решение Саманты работало для меня до некоторой степени, но высота в 812 пикселей, заданная в теге html, вызывала проблемы в ландшафте и с другими устройствами. В конце концов я обнаружил, что нацеливание только на экран размером с iPhone X с медиа-запросами CSS для альбомной и книжной ориентации принесло свои плоды. 

Значения пикселей ширины и высоты должны быть объявлены важными, чтобы iPhone мог их принять.

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) 
    and (orientation : portrait) { 
        html {
            height: 812px !important;
            width: 375px !important;  
        }
    }

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) 
    and (orientation : landscape) { 
        html {
            width: 812px !important;
            height: 375px !important;
        }     
    }
0
Michael Sibley