En la actualidad, muchos diseñadores de aplicaciones han comenzado a recurrir al desarrollo front-end H5, pero nuestra principal prioridad es resolver el problema de adaptación para todos los modelos de iPhone y Android. Ya sea que esté diseñando una aplicación o escribiendo un front-end H5, debe considerar la compatibilidad móvil.
Desde el iPhone
1. barra superior
El cliente anterior siempre ha utilizado el método de 20 puntos para la barra de estado + 44 puntos para la barra de navegación. desde iphone
2. Barra de operación inferior
Desde el iPhone En este momento, se debe dejar un área segura en blanco en la parte inferior y la última línea inferior del contenido de la página debe estar en la esquina del teléfono móvil. La altura de esta zona segura es de 34 puntos.
3. Método de adaptación
En conclusión, según los parámetros únicos actuales del teléfono móvil iphoneX, el método de adaptación que podemos adoptar es:
(1) metaetiqueta
Para adaptarse al iPhone
<meta nombre=contenido de la ventana gráfica=ancho=ancho del dispositivo,ajuste de la ventana gráfica=cubierta>
(2) Consultas de los medios
1. Utilice función constante
La función constante solo se puede utilizar si se establece viewport-fit=cover
@supports(bottom:constant(safe-area-inset-bottom)) { selector{ padding-bottom:constant(safe-area-inset-bottom); padding-bottom:calc(30px(valor asumido) + constante(safe- area-inset-bottom)); //Seleccione el método de adaptación según la situación real}}2. Utilice los parámetros de modelo únicos de iphoneX.
Pantalla solo @media y (ancho del dispositivo: 375 px) y (altura del dispositivo: 812 px) y (-webkit-device-pixel-ratio:3) { #buy { padding-bottom:34px }}(3) juicio js (jquery se usa a continuación)
if($(ventana).width() === 375 && $(ventana).height() === 724 && window.devicePixelRatio === 3){ #buy { padding-bottom:34px }}(4) Protocolo del cliente
También puede solicitar al cliente que consulte si es un iphoneX de acuerdo con el protocolo del cliente para mantener la coherencia con el cliente.
4. Explicación de parámetros
Los parámetros en el código anterior se explican a continuación:
Los parámetros anteriores se calculan según el estándar 1pt = 1px. Si la página H5 adopta el método de escala rem, entonces 1pt = 1px * 3 (resolución de iPhoneX).
ResumirLo anterior es el contenido completo de este artículo. Espero que el contenido de este artículo tenga cierto valor de referencia para el estudio o trabajo de todos. Si tiene alguna pregunta, puede dejar un mensaje para comunicarse. Red.