Tutorial de como adaptar o iphoneX à página do cliente H5

Atualmente, muitos designers de APP começaram a recorrer ao desenvolvimento front-end do H5, mas resolver o problema de adaptação para todos os modelos de iPhone e Android é nossa principal prioridade. Esteja você projetando um APP ou escrevendo um front-end H5, você deve considerar a compatibilidade móvel.

Desde o iPhone

1. Barra superior

O cliente anterior sempre utilizou o método de 20pt para barra de status + 44pt para barra de navegação. Desde o iphone

2. Barra de operação inferior

Desde o iPhone Neste momento, uma área segura em branco deve ser deixada na parte inferior, e a linha final do conteúdo da página deve estar no canto do celular. A altura desta área segura é 34pt.

3. Método de adaptação

Concluindo, com base nos atuais parâmetros exclusivos do telefone celular do iphoneX, o método de adaptação que podemos adotar é:

(1) metatag

Para se adaptar ao iPhone

 <meta name=viewport content=width=device-width,viewport-fit=cover>

(2) Consultas da mídia

1. Use função constante

A função constante só pode ser usada se viewport-fit=cover estiver definido

 @supports(bottom:constant(safe-area-inset-bottom)) { selector{ padding-bottom:constant(safe-area-inset-bottom); area-inset-bottom)); //Selecione o método de adaptação de acordo com a situação real}}

2. Use os parâmetros de modelo exclusivos do iphoneX

 @media only screen and (largura do dispositivo: 375px) e (altura do dispositivo:812px) e (-webkit-device-pixel-ratio:3) { #buy { padding-bottom:34px }}

(3) julgamento js (Jquery é usado abaixo)

 if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){ #buy { padding-bottom:34px }}

(4) Protocolo do cliente

Você também pode solicitar ao cliente que consulte se é um iphoneX de acordo com o protocolo do cliente para manter a consistência com o cliente.

4. Explicação dos parâmetros

Os parâmetros no código acima são explicados a seguir:

• safe-area-inset-bottom — Um novo recurso no ios11, usado para definir a distância entre a área segura e o limite
• 375 — A largura do dispositivo iphoneX
• 812 — A altura do dispositivo iphoneX
• 3 — A resolução do dispositivo iphoneX
• 724 — altura do dispositivo iphoneX (812) - altura da barra superior (88)
• 34 — Altura da zona de segurança inferior

Os parâmetros acima são calculados com base no padrão 1pt = 1px. Se a página H5 adotar o método rem de dimensionamento, então 1pt = 1px * 3 (resolução iphoneX).

O texto acima é todo o conteúdo deste artigo. Espero que o conteúdo deste artigo tenha certo valor de referência para o estudo ou trabalho de todos. Se você tiver alguma dúvida, pode deixar uma mensagem para comunicação. Rede.