Encontrei a solução para as barras brancas aqui :
Defina viewport-fit=cover
na <meta>
tag viewport , ou seja:
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
As barras brancas no UIWebView desaparecem:
A solução para remover as áreas pretas (fornecido pelo @dpogue em um comentário abaixo) é usar imagens LaunchStoryboard com cordova-plugin-splashscreen
a substituir as imagens de lançamento legado, usados por Cordova por padrão. Para fazer isso, adicione o seguinte à plataforma iOS em config.xml
:
<platform name="ios">
<splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@2x~iphone~comany.png" />
<splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
<splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
<splash src="res/screen/ios/Default@3x~iphone~comany.png" />
<splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
<splash src="res/screen/ios/Default@2x~ipad~comany.png" />
<!-- more iOS config... -->
</platform>
Em seguida, crie as imagens com as seguintes dimensões em res/screen/ios
(remova as existentes):
Default@2x~iphone~anyany.png - 1334x1334
Default@2x~iphone~comany.png - 750x1334
Default@2x~iphone~comcom.png - 1334x750
Default@3x~iphone~anyany.png - 2208x2208
Default@3x~iphone~anycom.png - 2208x1242
Default@3x~iphone~comany.png - 1242x2208
Default@2x~ipad~anyany.png - 2732x2732
Default@2x~ipad~comany.png - 1278x2732
Depois que as barras pretas são removidas, há outra coisa diferente no iPhone X: a barra de status é maior que 20 px devido ao "entalhe", o que significa que qualquer conteúdo na parte superior do aplicativo Cordova será ocultado por ela. :
Em vez de codificar um preenchimento em pixels, você pode lidar com isso automaticamente em CSS usando as novas safe-area-inset-*
constantes no iOS 11.
Nota: no iOS 11.0, a função para lidar com essas constantes foi chamada, constant()
mas no iOS 11.2 a Apple a renomeou para env()
( veja aqui ); portanto, para cobrir os dois casos, você precisa sobrecarregar a regra CSS com ambas e confiar no mecanismo de fallback CSS para aplicar o método apropriado:
body{
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
O resultado é o desejado: o conteúdo do aplicativo cobre a tela inteira, mas não é obscurecido pelo "entalhe":
Eu criei um projeto de teste Cordova que ilustra as etapas acima: webview-test.zip
Notas:
Botões de rodapé
- Se seu aplicativo tiver botões de rodapé (como o meu), você também precisará se inscrever
safe-area-inset-bottom
para evitar que eles se sobreponham ao botão Início virtual no iPhone X.
- No meu caso, não pude aplicar isso,
<body>
pois o rodapé está absolutamente posicionado; portanto, era necessário aplicá-lo diretamente ao rodapé:
.toolbar-footer{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
cordova-plugin-statusbar
- O tamanho da barra de status foi alterado no iPhone X, portanto, versões mais antigas de
cordova-plugin-statusbar
exibição incorretamente no iPhone X
- Mike Hartington criou essa solicitação de recebimento que aplica as alterações necessárias.
- Isso foi mesclado na
cordova-plugin-statusbar@2.3.0
versão, portanto, verifique se você está usando pelo menos esta versão para aplicar às inserções de área segura
tela de abertura
- As restrições do storyboard do LaunchScreen foram alteradas no iOS 11 / iPhone X, o que significa que a tela inicial parece "saltar" na inicialização ao usar versões existentes do plug-in ( veja aqui ).
- Isso foi capturado no relatório de bug CB-13505 , corrigido PR cordova-ios # 354 e lançado em
cordova-ios@4.5.4
, portanto, verifique se você está usando uma versão recente da cordova-ios
plataforma.
orientação do dispositivo
- Ao usar o UIWebView no iOS 11.0, girar de portrait> landscape> portrait faz com que o
safe-area-inset
não seja reaplicado, fazendo com que o conteúdo seja obscurecido pelo entalhe novamente (conforme destacado por jms em um comentário abaixo).
- Também acontece se o aplicativo for iniciado na paisagem e depois girado para o retrato
- Isso não acontece ao usar o WKWebView via
cordova-plugin-wkwebview-engine
.
- Relatório de radar: http://www.openradar.me/radar?id=5035192880201728
- Atualização : isso parece ter sido corrigido no iOS 11.1
Para referência, esta é a edição original de Cordova que eu abri que captura isso: https://issues.apache.org/jira/browse/CB-13273