tamaño de pantalla
El resumen de las dimensiones de desarrollo de la serie de iPhone que conocemos es el siguiente:
△Tamaño de desarrollo de cada modelo de iPhoneConvertir al tamaño de píxel conocido:
△Dimensiones multidimensionales de cada modelo.El mapa de aumento es en realidad la relación de aumento entre el tamaño de píxel y el tamaño de desarrollo, pero esto es solo una manifestación externa. El principal factor que influye en la ampliación es el PPI (DPI). Comprender la relación entre la densidad de la pantalla y los distintos tamaños nos ayudará a comprender en profundidad el concepto de ampliación: "¡Aprenda los conceptos básicos! Guía de DPI adaptada a diseñadores》
En esta actualización, el tamaño de pantalla y la resolución del iPhone8 han heredado las excelentes tradiciones del iPhone6 y posteriores;
Sin embargo, el iPhone X ha sufrido grandes cambios en cuanto a tamaño de pantalla, resolución e incluso forma. Tomemos como referencia el iPhone 8 para ver cómo debemos plantearnos la adaptación del iPhone X.
Echemos un vistazo a los cambios en el tamaño del iPhone X:
2. Adaptación de iPhoneX --- área segura (área segura)Las opiniones de Apple sobre el diseño del iPhone X son las siguientes:
El contenido principal debe estar en el área segura para garantizar que no quede oculto por las esquinas redondeadas (esquinas) del dispositivo, la carcasa del sensor (carcasa del sensor, flequillo completo) y el indicador de inicio en la parte inferior. En otras palabras, el contenido que diseñamos para mostrar debe estar dentro del área segura tanto como sea posible;
3. Adaptación de iPhoneX ---Esquema de adaptación viewport-fit 3.1 Adaptación de PhoneX, la metaetiqueta de viewport-fit se utiliza como esquema de adaptación en iOS 11. El valor predeterminado de viewport-fit es automático.El valor de viewport-fit es el siguiente:
| auto | Valor predeterminado: viewprot-fit:contain; el contenido de la página se muestra en el área segura |
| cubrir | viewport-fit:cover, el contenido de la página llena la pantalla |
configuración de metaetiqueta viewport-fit (cuando se cubre)
<meta nombre=contenido de la ventana gráfica=ancho=ancho del dispositivo,escala-inicial=1.0, escala-mínima=1.0, escala-máxima=1.0, escalable por el usuario=no, ajuste de la ventana gráfica=cubierta>
3.2 Introducción a la función css constante () y a la parte superior de inserción de área segura y a la inserción de área segura a la izquierda y a la inserción de área segura a la derecha y a la parte inferior de inserción de área segura
Como se muestra arriba, WebKit en iOS 11 incluye una nueva función CSS constante() y un conjunto de cuatro constantes predefinidas: área segura-inset-izquierda, área segura-inset-derecha, área segura -inset-top y segura -área-incrustada-abajo. Cuando se combinan, permite que los estilos hagan referencia al tamaño del área segura de cada aspecto.
3.1 Cuando configuramos viewport-fit:contain, que es el tiempo predeterminado; establecemos safe-area-inset-left, safe-area-inset-right, safe-area-inset-top y safe-area-inset-bottom, etc. Los parámetros no tienen ningún efecto.
3.2 Cuando configuramos viewport-fit:cover: la configuración es la siguiente
body { padding-top: constante(safe-area-inset-top); //La altura de la barra de navegación + barra de estado es 88px padding-left: constante(safe-area-inset-left); no es vertical Es 0 padding-right: constante(safe-area-inset-right); //Si la pantalla no es vertical, es 0 padding-bottom: constante(safe-area-inset-bottom);//La altura del arco inferior es 34px } 4. Adaptación de iPhoneX---estadísticas de alturaviewport-fit: cubierta + barra de navegación
5. Adaptación de iPhoneX --- consulta de mediosTenga en cuenta que aquí se utiliza 690 px (altura del área segura), no 812 px;
Pantalla solo @media y (ancho: 375 px) y (alto: 690 px) {cuerpo {fondo: azul}} 6.ajuste de ventana gráfica del iPhoneX Resumen del problema1. Cuando la página del iphoneX usa colores degradados si viewport-fit:cover;
1.1 La diferencia entre un solo color y un color degradado se establece cuando se establece el color de fondo. Si es un solo color, llenará toda la pantalla. Si se establece un color degradado, solo se representará a la altura de. el elemento secundario; y la altura de la página es de solo 690 px. Utilice el padding-top:88px anterior;
El cuerpo está fijado a:
<body><div class=content>este es subElemento</div></body>
1. Cuando es monocromático:
* { relleno: 0; margen: 0; } cuerpo { fondo:verde; padding-top: constante(área-segura-inset-top); );*/ /*padding-right: constante(área-segura-inset-right);*/ /*padding-bottom: constante(área-segura-inset-bottom);*/ }2. Color degradado
* { padding: 0; margin: 0 } body { background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f), to(#ffaa22)); -inset-top); //88px /*padding-left: constante(área-segura-inset-left);*/ /*padding-right: constante(área-segura-inset-right);*/ /*padding-bottom: constante(área-segura-inset-bottom);*/ }A continuación se muestra cómo resolver el problema del uso de colores degradados para llenar toda la pantalla.
<!DOCTYPE html><html><head> <meta name=viewport content=initial-scale=1, viewport-fit=cover> <title>Diseñar sitios web para iPhone X: respetar las áreas seguras</title> <style> * {relleno: 0; margen: 0;} html, cuerpo {altura: 100%;} cuerpo {relleno-top: constante(área-segura-inset-top); constante (área-segura-inset-izquierda); relleno-derecha: constante (área-segura-inset-derecha); padding-bottom: constante (área-segura-inset-bottom); gradiente(lineal, 0 0, 0 abajo, desde(#ffd54f), hasta(#ffaa22)); ancho: 100% alto: 724px; </style></head><body><div class=content>este es subElement</div></body></html>2. El elemento de la página utiliza una adaptación de posicionamiento fijo: {position:fixed;}
2.1 Cuando la página del elemento secundario está fija en la parte inferior; cuando usa viewport-fit:contain, puede ver que cuando se muestra bottom:0, solo se mostrará en el área segura;
<!DOCTYPE html><html><head> <meta nombre=contenido de ventana gráfica=escala-inicial=1> <!--<meta nombre=contenido de ventana gráfica=escala-inicial=1, vista-fit=cubierta>--> <title>Diseñar sitios web para iPhone X: respetar las áreas seguras</title> <style> * { padding: 0; margin: 0 } /*html,body {*/ /*height: 100%;*/ /*}*/ cuerpo { fondo: gris; /*padding-top: constante(área-segura-inset-top);*/ /*padding-left: constante(área-segura-inset-izquierda );*/ /*padding-right: constante(área-segura-inset-right);*/ /*padding-bottom: constante(área-segura-inset-bottom);*/ } .top { ancho: 100%; altura: 44px; fondo: púrpura; } .bottom { posición: fondo: 0; izquierda: 0; altura: 44px; head><body> <div class=top>esto es arriba</div> <div class=bottom>esto es abajo</div></body></html>2.1 Cuando la página del elemento secundario se fija en la parte inferior; cuando se usa viewport-fit:cover, puede ver que bottom:0 solo se mostrará en el área segura;
Agregar html,cuerpo {ancho:100%;alto:100%}
Figura 1:
* {relleno: 0; margen: 0; } html,cuerpo {altura: 100%; } cuerpo {fondo: gris; relleno-top: constante(área-segura-inset-top); área-inset-left); relleno-derecha: constante (área-segura-inset-derecha); padding-bottom: constante (área-segura-inset-bottom); ancho: 100%; alto: 44px; fondo: púrpura; } .bottom {posición: fondo: 0; verde;Figura 2:
* {relleno: 0; margen: 0; } html,cuerpo {altura: 100%; } cuerpo {fondo: gris; relleno-top: constante(área-segura-inset-top); área-inset-left); padding-right: constante(área-segura-inset-right); /*padding-bottom: constante(área-segura-inset-bottom);*/ } .top { ancho: 100%; alto: 44px; fondo: púrpura; .bottom { posición: fondo: verde }2.3 Solución a la capa de máscara emergente alertView
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <!--<meta name=viewport content=ancho=ancho del dispositivo, escala inicial=1.0, escala mínima=1.0 , escala máxima=1.0, escalable por el usuario=no>--> <meta nombre=ventana gráfica contenido=ancho=ancho-dispositivo,escala-inicial=1.0, escala-mínima=1.0, escala-máxima=1.0, escalable-usuario=no, viewport-fit=cover> <meta http-equiv=pragma content=no-cache > <meta http-equiv=cache-control content=no-cache> <meta http-equiv=expires content=0> <title>alertView</title> <script data-res=eebbk> document.documentElement.style.fontSize = ventana.pantalla.width / 7.5 + 'px'; </script> <estilo> * { margen: 0 } html,cuerpo { ancho: 100%; altura: 100%; } cuerpo { tamaño de fuente: 0,32rem; constante (área-segura-inset-top); padding-left: constante (área-segura-inset-left); constante (área-segura-inset-right); -inset-bottom); } .content { text-align: center } .testBut { margen: 50px auto; 1px gris oscuro sólido; contorno: ninguno; selección de usuario: ninguno; color de fondo: amarillo; </style> <link href=alertView.css rel=stylesheet type=text/css></head><body> <sección class=content> <button class=testBut onclick=showLoading()>Carga de ventana emergente</button> </section> <script type=text/javascript src=alertView.js></script> <script> function showLoading() { UIAlertView.show({ type:input, title: Recordatorio cálido, //Contenido del título: la membresía VIP está a punto de caducar, //Obtener nuevo isKnow: falso }); var xx = nuevo UIAlertView(); console.log(xx } </script></body></html> ResumirLo anterior es lo que el editor le presenta sobre la adaptación de páginas HTML5 a iPhoneX. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!