ios - support - submit app to apple store




Aplicativo Cordova não está sendo exibido corretamente no iPhone X(Simulador) (6)

Existem 3 etapas que você precisa fazer

para iOs 11 barra de status e problemas de cabeçalho do iPhone X

1. Cobertura de ajuste do visor

Adicione viewport-fit=cover à meta do seu viewport em <header>

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">

Demonstração: https://jsfiddle.net/gq5pt509 (index.html)

  1. Adicione mais imagens splash ao seu config.xml dentro de <platform name="ios">

Não pule esta etapa , isso é necessário para obter ajuste de tela para o trabalho do iPhone X

<splash src="your_path/[email protected]~ipad~anyany.png" />   <!-- 2732x2732 -->
<splash src="your_path/[email protected]~ipad~comany.png" />   <!-- 1278x2732 -->
<splash src="your_path/[email protected]~iphone~anyany.png" /> <!-- 1334x1334 -->
<splash src="your_path/[email protected]~iphone~comany.png" /> <!-- 750x1334  -->
<splash src="your_path/[email protected]~iphone~comcom.png" /> <!-- 1334x750  -->
<splash src="your_path/[email protected]~iphone~anyany.png" /> <!-- 2208x2208 -->
<splash src="your_path/[email protected]~iphone~anycom.png" /> <!-- 2208x1242 -->
<splash src="your_path/[email protected]~iphone~comany.png" /> <!-- 1242x2208 -->

Demonstração: https://jsfiddle.net/mmy885q4 (config.xml)

  1. Corrija seu estilo em CSS

Use safe-area-inset-left , safe-area-inset-right , safe-area-inset-top ou safe-area-inset-bottom

Exemplo: (Use no seu caso!)

#header {
   position: fixed;
   top: 1.25rem; // iOs 10 or lower
   top: constant(safe-area-inset-top); // iOs 11
   top: env(safe-area-inset-top); // iOs 11+ (feature)

   // or use calc()
   top: calc(constant(safe-area-inset-top) + 1rem);
   top: env(constant(safe-area-inset-top) + 1rem);

   // or SCSS calc()
   $nav-height: 1.25rem;
   top: calc(constant(safe-area-inset-top) + #{$nav-height});
   top: calc(env(safe-area-inset-top) + #{$nav-height});
}

Bônus: Você pode adicionar classe de corpo como is-android ou is-ios em deviceready

var platformId = window.cordova.platformId;
if (platformId) {
   document.body.classList.add('is-' + platformId);
}

Então você pode fazer algo assim em CSS

.is-ios #header {
 // Properties
}

Eu testei meu aplicativo baseado em Cordova ontem no iPhone X Simulator no Xcode 9.0 (9A235) e ele não parecia bom. Em primeiro lugar, em vez de preencher a área da tela cheia, havia uma área preta acima e abaixo do conteúdo do aplicativo. E pior, entre o conteúdo do aplicativo e o preto, havia duas barras brancas.

Adicionar o cordova-plugin-wkwebview-engine para que o Cordova renderize usando o WKWebView (não o UIWebView) corrige as barras brancas. Por meu aplicativo não é migrado do UIWebView para o WKWebView devido a problemas de vazamento de memória e desempenho ao usar o cordova-plugin-wkwebview-engine que ocorre ao carregar imagens baixadas do Inapp Comprar conteúdo hospedado em uma tela HTML5 ( file:// direto file:// acesso pelo O Webview não é possível devido a restrições de segurança no WKWebView, portanto, os dados da imagem devem ser carregados via cordova-plugin-file ).

Essas capturas de tela mostram um aplicativo de teste com um plano de fundo azul definido no <body >. Acima e abaixo do UIWebView, você pode ver as barras brancas, mas não com o WKWebView:

Ambas as visualizações do Cordova exibem as áreas pretas quando comparadas a um aplicativo nativo que preenche a área da tela inteira:



No meu caso, onde cada tela inicial foi projetada individualmente em vez de autogerada ou colocada em um formato story board, eu tive que ficar com a configuração da tela Legacy Launch e adicionar imagens retrato e paisagem para direcionar orientações iPhoneX 1125 × 2436 para o config.xml igual a:

<splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
<splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />

Depois de adicioná-los ao config.xml ("viewport-fit = cover" já estava definido em index.hml), meu aplicativo criado com o Ionic Pro preenche a tela inteira em dispositivos iPhoneX.


Por favor, note que este artigo: https://medium.com/the-web-tub/supporting-iphone-x-for-mobile-web-cordova-app-using-onsen-ui-f17a4c272fcd tem tamanhos diferentes do que acima e cordova página do plugin:

[email protected]~iphone~anyany.png (= 1334x1334 = 667x667@2x)
[email protected]~iphone~comany.png (= 750x1334 = 375x667@2x)
[email protected]~iphone~comcom.png (= 750x750 = 375x375@2x)
[email protected]~iphone~anyany.png (= 2436x2436 = 812x812@3x)
[email protected]~iphone~anycom.png (= 2436x1242 = 812x414@3x)
[email protected]~iphone~comany.png (= 1242x2436 = 414x812@3x)
[email protected]~ipad~anyany.png (= 2732x2732 = 1366x1366@2x)
[email protected]~ipad~comany.png (= 1278x2732 = 639x1366@2x)

Eu redimensionei imagens como acima e atualizei a plataforma ios e cordova-plugin-splashscreen para o mais recente e o flash para a tela branca depois que um segundo problema foi corrigido. No entanto, a imagem inicial de spash tem uma borda branca na parte inferior agora.


Para uma correção manual de um projeto cordova existente

As barras pretas

Adicione isto ao seu arquivo info.plist . Consertar a imagem de lançamento é um problema separado, por exemplo, Como adicionar uma imagem de lançamento do iPhoneX

<key>UILaunchStoryboardName</key>
<string>CDVLaunchScreen</string>

As barras brancas

Definir viewport-fit = cover na meta tag

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">

Correção para o problema de rotação de tela do iPhone X / XS

No iPhone X / XS, uma rotação de tela fará com que a altura da barra de cabeçalho use um valor incorreto, porque o cálculo de inset de área segura * não estava refletindo os novos valores no tempo da atualização da interface do usuário. Esse bug existe no UIWebView mesmo no iOS 12 mais recente. Uma solução alternativa é inserir uma margem superior de 1 px e, em seguida, invertê-lo rapidamente, o que acionará imediatamente o recife de área segura * para ser recalculado imediatamente. Uma correção um tanto feia, mas funciona se você tiver que ficar com o UIWebView por um motivo ou outro.

window.addEventListener("orientationchange", function() {
    var originalMarginTop = document.body.style.marginTop;
    document.body.style.marginTop = "1px";
    setTimeout(function () {
        document.body.style.marginTop = originalMarginTop;
    }, 100);
}, false);

O propósito do código é fazer com que o document.body.style.marginTop mude um pouco e depois inverta-o. Não precisa necessariamente ser "1px". Você pode escolher um valor que não faça com que sua interface do usuário pisque, mas atinja seu objetivo.





iphone-x