Cómo diseñar el ancho de las páginas web móvilesCómo diseñar el ancho de las páginas web móviles
Estándares de tamaño de diseño web móvil Los estudiantes que participan en el diseño y desarrollo de terminales móviles básicamente lucharán con el problema del tamaño durante mucho tiempo antes de que puedan resolverlo. Entonces, ¿sabes cuáles son los estándares de tamaño para el diseño web móvil? ¡Echemos un vistazo!
Fenómenos
En primer lugar, todos sabemos que el tamaño de pantalla de los dispositivos móviles es muy grande y está fragmentado. Especialmente para Android, escucharás muchas resoluciones: 480x800, 480x854, 540x960, 720x1280, 1080x1920 y la legendaria pantalla 2K. La fragmentación del iPhone también se ha vuelto cada vez más intensa en los últimos años: 640x960, 640x1136, 750x1334, 1242x208.
No te dejes intimidar por estos tamaños. De hecho, la mayoría de las aplicaciones y páginas web móviles se pueden mostrar normalmente en pantallas de varios tamaños. Debe haber soluciones para todos los problemas, grandes y pequeños, y hay reglas a seguir.
Píxeles por pulgada
Ya sabes, la pantalla está formada por muchos píxeles. Como se mencionó anteriormente, muchas resoluciones son los tamaños de píxeles reales de la pantalla del teléfono móvil. Por ejemplo, una pantalla de 480x800 consta de 800 filas y 480 columnas de píxeles. Cada punto emite un color de luz diferente, que conforma la imagen que vemos. Pero el tamaño físico de la pantalla del teléfono no es proporcional al tamaño de los píxeles. El ejemplo más típico es que los píxeles de la pantalla del iPhone3gs son 320x480 y los píxeles de la pantalla del iPhone4s son 640x960. Solo dos veces, pero ambos teléfonos miden 3,5 pulgadas.
Así que tenemos que introducir el concepto más importante: píxeles por pulgada, que es PPI (píxeles por pulgada). Este indicador es el puente entre el mundo digital y el físico.
Los píxeles por pulgada, para ser precisos, es el número de píxeles dispuestos por pulgada de longitud. Una pulgada es una longitud fija equivalente a 2,54 centímetros, que es aproximadamente la longitud del último nudillo de su dedo índice. Cuanto mayores sean los píxeles por pulgada, más fina será la visualización de la pantalla. Las pantallas Retina son mucho más claras que las pantallas normales porque tienen el doble de píxeles por pulgada.
Ampliación y píxeles lógicos
Tomemos iPhone3gs y 4s como ejemplos. Suponiendo que exista una interfaz de lista de correo, también podríamos imaginarla de acuerdo con las ideas del diseño web del lado de la PC. Los 3gs sólo pueden mostrar entre 4 y 5 líneas, mientras que los 4 pueden mostrar entre 9 y 10 líneas, y cada línea se vuelve extremadamente ancha. Pero los dos teléfonos en realidad son del mismo tamaño. Si se muestra así, el efecto será perfecto en el 3gs, pero será tan pequeño que los caracteres no se podrán leer claramente en el 4s.
En realidad, estos dos efectos son iguales. Esto se debe a que las pantallas de retina utilizan 2x2 píxeles como un píxel. Por ejemplo, una barra de navegación superior que originalmente tenía 44 píxeles de alto aparece a 88 píxeles de alto en una pantalla retina. Todos los elementos de la interfaz aumentan el doble de tamaño, pero el efecto es el mismo que en 3gs. Pero la calidad de la imagen es más clara.
Antes, en las imágenes de recursos de las aplicaciones iOS, una misma imagen solía tener dos tamaños. Verás que algunos nombres de archivos tienen @2x y otros no. Los que no tienen @2x se usan en pantallas normales y los que tienen @2x se usan en pantallas de retina. Una vez que la imagen esté lista, iOS decidirá cuál usar, y lo mismo ocurre con Android.
Como puedes ver, Apple ha definido un aumento de 2x para pantallas de retina basándose en pantallas normales (excepto el iPhone 6plus, que ha llegado a 3x). Los píxeles reales se dividen por el factor de ampliación para obtener el tamaño de píxel lógico. Siempre que los píxeles lógicos de las dos pantallas sean los mismos, sus efectos de visualización serán los mismos.
La solución de Android es similar, pero más compleja. Porque el tamaño de la pantalla de Android es demasiado grande y el rango de resolución es amplio, a diferencia de Apple, que sólo tiene unos pocos dispositivos y tamaños fijos. Por lo tanto, Android divide los píxeles por pulgada de varios dispositivos en varios rangos y define diferentes factores de aumento para dispositivos en diferentes rangos para garantizar efectos de visualización similares. Aunque el concepto de píxeles por pulgada es importante, no es necesario que lo calculemos nosotros mismos. Tanto iOS como Android nos ayudan a calcular.
Como se muestra en la figura, una pantalla con alrededor de 120 píxeles por pulgada se clasifica como ldpi, una pantalla con alrededor de 160 píxeles por pulgada se clasifica como mdpi, y así sucesivamente. De esta forma, todas las pantallas de Android han encontrado sus posiciones y se les ha dado el aumento correspondiente:
LDPI[0.75x]
Mdpi[1x]
Hdpi[1.5 veces]
Xhdpi[22x]
Xxhdpi[33x]
Xxxhdpi[4 veces]
La ampliación de cada modelo de iPhone es relativamente simple, del que hablaremos más adelante. Entonces hay tantos teléfonos Android, ¿cómo dividirlos específicamente? ¿Qué móviles tienen múltiplos? Veamos primero una tabla. Estos son los datos de Umeng de octubre de 2014 a marzo de 2015:
Según la situación actual del mercado, las resoluciones de varios teléfonos móviles se pueden juzgar aproximadamente de esta manera. Aunque no es completo, todavía tiene cierta importancia de referencia dentro de al menos un año:
Ldpi ahora está extinto, así que no te preocupes.
Mdpi[320x480] (la cuota de mercado es inferior a 5, los teléfonos móviles nuevos no tendrán este aumento, la pantalla suele ser extremadamente pequeña)
Hdpi[480x800, 480x854, 540x960] (bajo temprano Para teléfonos de gama alta, la pantalla está en el rango de 3,5 pulgadas; para los teléfonos de gama baja actuales, la pantalla está en el rango de 4,7-5,0 pulgadas)
;Gama baja actual Los teléfonos tienen pantallas en el rango de 5,0 a 5,5 pulgadas)
XXXPI[1080x1920] (Los teléfonos de gama alta en los primeros años y ahora los teléfonos de gama alta generalmente tienen pantallas de más de 5,0 pulgadas)
Xxxhdpi[1440x2560] (un número muy pequeño de teléfonos móviles con pantalla 2K, como Google Nexus6)
Por supuesto, se utiliza 1x mdpi como punto de referencia. Para dispositivos con píxeles por pulgada más altos o más bajos, una visualización similar a la ampliación de referencia solo se puede obtener multiplicando por el factor de ampliación correspondiente.
Sin embargo, cabe señalar que el tamaño de píxel lógico de los dispositivos Android no es uniforme. Por ejemplo, dos pantallas comunes, 480x800 y 1080x1920, pertenecen a hdpi y xxhdpi respectivamente. Los píxeles lógicos son 320x533 y 360x640 después de dividirlos con un aumento de 1,5x y 3x respectivamente. Evidentemente, este último es más ancho y alto y puede mostrar más contenido. Por lo tanto, incluso si hace zoom, es posible que los efectos de visualización de varios dispositivos Android no sean exactamente iguales.
Unidad
No es difícil encontrar que lo que realmente determina el efecto de visualización es el tamaño lógico de píxeles. Por tanto, tanto las plataformas iOS como Android definen sus propias unidades lógicas de píxeles. La unidad de tamaño para iOS es pt y la unidad de tamaño para Android es dp. Para ser honesto, los dos son en realidad lo mismo.
La relación de conversión entre unidades cambia con la ampliación:
1: 1pt=1dp=1px (mdpi, iPhone3gs)
1,5 veces: 1pt= 1dp= 1.5px(hdpi)
2 veces: 1pt=1dp=2px(xhdpi, iPhone4s/5/6)
3 veces: 1pt=1dp=3px(xxhdpi, iPhone6 )
4 veces: 1pt=1dp=4px(xxxhdpi)
Las unidades determinan nuestra forma de pensar. Durante el proceso de diseño y desarrollo, piense en la interfaz en términos de tamaño de píxel lógico. Al diseñar aplicaciones de Android, a algunos diseñadores les gusta configurar el lienzo en 1080x1920, mientras que a otros les gusta configurarlo en 720x1280. Las dimensiones de un elemento de interfaz determinado son inconsistentes. El tamaño mínimo del área de clic de Android es 48x48dp, lo que significa que en dispositivos xhdpi, el tamaño del botón es al menos 96x96px. En un dispositivo xxhdpi es 144x144px.
No importa cuán grande sea la configuración del lienzo, diseñamos un estilo de interfaz de ampliación básico y las unidades que los desarrolladores necesitan son píxeles lógicos. Por lo tanto, para garantizar una comunicación precisa y eficiente, ambas partes deben describir y comprender la interfaz desde la perspectiva del tamaño de píxel lógico, ya sea en anotaciones o en la comunicación diaria. Deja de decir "La altura de la barra de pestañas inferior es de 96 píxeles, la hice según xhdpi".
¿Qué pasa con la red?
La unidad absoluta de la página móvil sigue siendo px, al menos eso es lo que dice el código, pero es lo mismo que la aplicación. Dado que los píxeles por pulgada son una propiedad intrínseca del propio dispositivo, afectará a todas las aplicaciones del dispositivo, incluido el navegador. La tecnología de front-end puede hacer un buen uso de cada píxel por pulgada de un dispositivo. Con solo una línea de código, el navegador muestra la página usando el modo de visualización de la aplicación. Escale según el factor de ampliación correspondiente en función de píxeles por pulgada.
Tomemos el iPhone5s como ejemplo. La resolución de la pantalla es 640x1136 y el aumento es 2. El navegador pensará que la resolución de la pantalla es 320x568 o se referirá al tamaño de ampliación. Entonces, al crear una página, solo necesita hacer zoom según el punto de referencia. Independientemente de la pantalla y el aumento, la página debe diseñarse y desarrollarse de acuerdo con el tamaño lógico de píxeles. Sin embargo, al preparar el mapa de recursos, debe preparar un mapa de tamaño 2x y reducirlo a 1x mediante código para garantizar la claridad.
Aplicación práctica
Lo que más preocupa a todos es la aplicación práctica y cómo configurar el lienzo. Clasifiquemos las tres plataformas de iOS, Android y Web. Pero antes de eso, quiero presentarles un pequeño truco a mis amigos que usan PS para diseñar.
Como dije antes, tenemos que pensar en las interfaces en términos de tamaños de píxeles lógicos. Esto se refleja en el proceso de diseño al configurar la unidad en un píxel lógico. Abra la interfaz de Preferencias de PS-Unidades y reglas y cambie el tamaño y las unidades de texto a puntos. El enfoque aquí es el software, ya sea que diseñen iOS, Android o aplicaciones web, todas las organizaciones utilizarán software. Por supuesto, hay que recordar el nombre de cada unidad de plataforma. Aquí solo usamos su principio y no nos importa el nombre.
Para ajustar la ampliación, se controla mediante el DPI en el tamaño de la imagen. Este DPI es en realidad PPI, píxeles por pulgada. Existe un sentido común que todo el mundo conoce: el DPI de diseño en la pantalla está establecido en 72 y el DPI de diseño para imprimir está establecido en 300. ¿Por qué estos dos números?
En primer lugar, hablemos de 300, que está relacionado con la capacidad de resolución del ojo humano. Dado que 1 pulgada es una longitud fija, la cantidad de píxeles por 1 pulgada determina la nitidez de la calidad de la imagen. Como dije antes, esto son píxeles por pulgada, también llamados DPI. Cuando el DPI es superior a 300, su finura dará a las personas una sensación de realidad, como los objetos del mundo real. Por el contrario, si el DPI es sólo 10, entonces sólo 10 píxeles son sólo el tamaño del nudillo de su dedo índice, lo que obviamente es un mosaico. Por lo tanto, la impresión debe configurarse en 300 para garantizar la claridad.
En cuanto al 72, existen ciertas razones históricas para ello. El primer diseño gráfico se realizó en computadoras Mac y la resolución de pantalla de la propia Mac era 72. En PS, el DPI de la imagen también se establece en 72, lo que garantiza que el tamaño que se muestra en la pantalla sea el mismo que el tamaño de impresión, lo que facilita el diseño. La resolución de monitor de 72 PC se ha convertido gradualmente en el estándar predeterminado de la industria y este conjunto de reglas siempre se ha utilizado.
Ahora volviendo al tema, ¿cómo ajustar la ampliación mediante DPI? Dado que la resolución de la pantalla en sí es 72, configurar el DPI en 72 es exactamente el doble del tamaño, luego configurarlo en el doble de 72 es una pantalla con un aumento de 2. Es así de simple.
Echemos un vistazo a la configuración del lienzo para las tres plataformas:
iPhone
Los tamaños de pantalla de los iPhone varían. Me refiero al tamaño lógico de píxeles, que es realmente un dolor de cabeza. Si desea cubrir todos los iPhone con un solo diseño, debe elegir un modelo con un compromiso lógico de píxeles.
Desde la perspectiva de los datos de cuota de mercado, la pantalla del iPhone5/5s es actualmente la más popular. La ampliación es 2 y los píxeles lógicos son 320x568.
La tendencia alcista es la más fuerte y se espera que la pantalla del iPhone 6 sea la primera en el futuro. La ampliación es 2 y los píxeles lógicos son 375x667.
Diseñar según estos dos tamaños es la práctica habitual. Puedes considerar el iPhone 4s más corto y el 6plus más grande, que no serán demasiado estrechos.
Sin embargo, debes prestar atención al recortar imágenes, ya que la imagen 3x del iPhone6plus se amplía desde la imagen 2x, el mapa de bits debe ser claro.
Robots
Se dice que Android está muy fragmentado, pero ahora es más fácil de manejar que iOS. Porque los píxeles lógicos actuales de las pantallas de Android han tendido a ser unificados: 360x640, depende de cuántas veces lo hayas configurado. Si desea que prevalezca xhDPI, establezca el DPI en 72x2=144. Si desea que predomine xxhdpi, establezca ppp en 72x3=216.
Para aquellas máquinas más antiguas de gama baja, la pantalla de 480 píxeles de ancho será más pequeña y mostrará menos contenido. Presta un poco de atención e intenta poner el contenido importante en la parte superior de la interfaz.
Por supuesto, estos modelos serán marginados y básicamente eliminados dentro de un año. Hoy en día, cualquier cosa que pueda ejecutarse puede utilizarse como máquina funcional. Si hay demasiado software, definitivamente se atascará y será imposible hablar de la experiencia del usuario. Está bien sin siquiera pensar en ello.
Net
No existe un estándar unificado para páginas web móviles. La forma más popular es diseñarlos según el tamaño del iPhone5. 2. Píxeles lógicos 320x568.
Este enfoque es más realista. Las pantallas ampliadas 2 veces son comunes tanto en iOS como en Android, y los píxeles lógicos en la pantalla ampliadas 2 veces son los más pequeños. De esta forma, el tamaño de la imagen se puede mantener pequeño y la página se carga rápidamente. Por supuesto, la desventaja es que la imagen no es particularmente clara cuando se ve en un dispositivo que la amplía 3 veces.
Si buscas calidad de imagen y estás dispuesto a sacrificar la velocidad de carga, puedes diseñarla según la pantalla más grande. Es decir, el tamaño del iPhone6plus, ampliado 3 veces, píxeles lógicos 414x736.
Resumen
El tamaño del terminal móvil es más complicado que el del terminal PC, y la clave está en el factor de ampliación. Pero es precisamente debido a la ampliación que las pantallas grandes y pequeñas vuelven a la misma línea horizontal, asegurando que un conjunto de diseños pueda adaptarse a varias pantallas. A partir de esta línea horizontal, te resultará fácil de entender.
¿Cómo ajustar los márgenes de la página en WPS móvil?
1. Cree un nuevo texto WPS, haga clic en Diseño de página---Tamaño de papel.
2. Haga clic en la pestaña Márgenes.
3. Configure los márgenes de la página en 40 mm para los márgenes superior, inferior, izquierdo y derecho. Por supuesto, también puede configurarlos según sus propias necesidades.
4. Seleccione Aplicar a todo el documento.
5. El margen es la distancia desde el borde de la página hasta el texto. Generalmente puede insertar texto y gráficos en el área imprimible dentro del margen, y también puede colocar ciertos elementos en el área del margen (como encabezados, pies de página, números de página, etc.).
¿Cómo configurar el zoom del navegador oppo?
Incluyendo el zoom de la página web móvil, si desea configurarlo, puede configurarlo en la configuración del teléfono móvil OPPO.
¿Configuración del tamaño de zoom de la página del navegador Oppo?
1
/6
Navegador 360
Primero busca el icono de la lupa en la esquina inferior derecha y haz clic en
2
/6
Haga clic y seleccione la proporción de zoom requerida o haga clic en la proporción de zoom para que surta efecto en todas las páginas
3
/ 6
Navegador Firefox
Ingrese a la página de inicio de Firefox y podrá ver tres líneas horizontales en la parte superior derecha del navegador
4
/6
Del mismo modo, haga clic y busque Zoom, puede elegir la relación de zoom requerida y la pantalla completa
5
/6
Google Chrome
Google Chrome y Firefox funcionan de manera similar, haga clic en las tres líneas horizontales en la esquina superior derecha
6
/6
Buscar Zoom, puede elegir la relación de zoom deseada y pantalla completa
¿Cómo hacer que la imagen cambie de tamaño de forma adaptativa en el teléfono móvil?
1. Abra la configuración de su teléfono y haga clic en la pantalla de la página, como se muestra a continuación.
2. Busque y abra el fondo de pantalla en la página de visualización, como se muestra a continuación.
3. Después de abrir la página del fondo de pantalla, haga clic en Establecer fondo de pantalla, como se muestra a continuación.
4. Luego vamos a la página de configuración del fondo de pantalla. En lugar de usar la imagen de fondo del propio sistema, seleccionamos la imagen en la galería, como se muestra a continuación.
5. Ingrese a la galería y seleccione una imagen horizontal, como se muestra a continuación.
6. Después de abrir la imagen para cargar, la imagen completa se adaptará automáticamente al tamaño de la pantalla, como se muestra a continuación.
7. Luego puedes configurarlo directamente como el escritorio del teléfono móvil, como se muestra a continuación.
¿Cómo modificar la altura de la fila en una hoja de cálculo WPS móvil? ¿Cómo configurar el ancho de la columna?
La versión móvil de la hoja de cálculo WPS puede personalizar la altura de la fila y el ancho de la columna al igual que la versión para computadora. Las operaciones específicas son las siguientes.
Herramientas/Materiales
Versión móvil de WPSoffice
Establecer altura de fila
1 Ingrese ahora a la versión móvil de la interfaz de hoja de cálculo WPS; Establezca la altura de las filas 1 a 10 a 20
2. Toque suavemente el número de fila "1" en la fila 1 con el dedo. Se seleccionará la fila 1 y el efecto se muestra en la figura; abajo. Aquí, en la línea 1, se muestran dos cuadros verdes hacia arriba y hacia abajo, como lo indican las flechas en la imagen a continuación. Golpee ligeramente el cuadro verde de abajo con el dedo y, sin soltarlo, tire suavemente hacia abajo hasta la quinta fila. Es decir, se seleccionan las filas 1 a 10. Como se muestra a continuación.
3. Luego, haga clic en el icono en la parte inferior izquierda de la página, como se muestra en la flecha en la imagen a continuación.
4. Aparece la barra de comandos, deslice el dedo. Suba la página y pásela. Vaya a "Cambiar tamaño" y haga clic en él.
5. Aparecerá la página para configurar la altura de la fila. Luego, elimine el número de altura de la fila original y cámbielo a 20; luego haga clic en "Finalizar" en la esquina superior izquierda de la página. alturas de fila de las filas 1 a 10. Son 20.
Establezca el ancho de la columna
1. Por ejemplo, establezca el ancho de las columnas 1 a 3 a 15 y toque suavemente la etiqueta de la columna "A" en la columna 1 con el dedo; Se selecciona la columna A y el efecto es como se muestra en la siguiente figura. Toque ligeramente con el dedo el cuadro verde de la derecha y, sin soltarlo, tire suavemente hacia la derecha.
2. Es decir, se seleccionan las columnas 1 a 3. Como se muestra a continuación.
3. Luego, haga clic en el icono en la parte inferior izquierda de la página, como se muestra en la flecha en la imagen a continuación.
4. Aparece la barra de comandos, deslice el dedo. Suba la página y pásela. Vaya a "Cambiar tamaño" y haga clic en él.
5. Aparece la página de configuración del ancho de la columna, luego elimine el número del ancho de la columna original y cámbielo a 15, luego haga clic en Listo en la esquina superior izquierda de la página.