¿Cuál es el mejor ancho para diseñar un sitio web para dispositivos móviles?

Answer 1

Haz 4 diseños de diseño

Sigo el enfoque de Metal Toad para una planificación de diseño receptiva:

• 0-519 píxeles: la mayoría de los teléfonos en modo vertical verán el diseño más estrecho. El paisaje de iPhone seguirá viendo este diseño más estrecho.

• 520-759 píxeles: los teléfonos con resoluciones grandes y las tabletas con resoluciones pequeñas (incluido Kindle Fire) verán este diseño en orientación vertical.

• 760-959 píxeles: iPad y la mayoría de las tabletas Android verán este diseño en vertical, y la mayoría de los teléfonos Android lo verán en orientación horizontal.

• Más de 960 píxeles: los teléfonos Android más nuevos de pantalla grande, iPad y la mayoría de las tabletas Android en orientación horizontal verán el diseño de ancho completo. Este es también el diseño que verán los escritorios.

Answer 2

Desafortunadamente, esta no es una respuesta directa porque hay tantos dispositivos y un ancho para un conjunto de dispositivos no funcionará exactamente de la misma manera que otro conjunto.

Lo que debe analizar es un término llamado “consulta de medios”. Este componente CSS le permitirá personalizar cualquier tipo de atributos necesarios para garantizar que su aplicación se ajuste / funcione correctamente dentro de un dispositivo. Puede obtener todos los tamaños comunes de dispositivos móviles de Internet y luego establecer estos parámetros dentro de las consultas de medios. Una vez que tenga estos componentes en su lugar, todos sus dispositivos móviles se verán increíbles en su aplicación.

Answer 3

No es así como funciona el diseño receptivo porque hay una gran cantidad de dispositivos y la mayoría de ellos son desconocidos, pero hay una solución.

Puede usar Bootstrap Grid o consultas de medios o puede usar Ambos y eso es lo que estoy haciendo.

Para Bootstrap, uso todas las clases de gird:

• col-lg para dispositivos de pantalla más grande (computadoras de escritorio) < 1200px
• col-md para dispositivos de pantalla mediana laptops y tabletas en modo vertical < 992px
• col-sm para dispositivos de pantalla más pequeños (tabletas) < 768px
• col-xs para dispositivos extra pequeños móviles en general> 768px

Y puede usar consultas de medios para que su encabezado y pie de página respondan

Este bootstrap Media Consultas:

/ * Dispositivos extra pequeños (teléfonos, menos de 768 px) * /
/ * Sin consulta de medios ya que este es el valor predeterminado en Bootstrap * /

/ * Dispositivos pequeños (tabletas, 768 px y más) * /
@media (ancho mínimo: @ screen-sm-min) {…}

/ * Dispositivos medianos (computadoras de escritorio, 992 px y superiores) * /
@media (min-width: @ screen-md-min) {…}

/ * Dispositivos grandes (escritorios grandes, 1200 px y más) * /
@media (min-width: @ screen-lg-min) {…}

Y no olvidemos la leyenda CSS Grid que está tomando a la comunidad por la fuerza ahora esta es una guía rápida de CSS Grid.

Answer 4

Suponiendo que sus visitantes estén en los EE. UU., Puede concentrarse en 360px, que es un tamaño estándar de Android. También cubrirá 375 px para iPhones más pequeños y no estará lejos de los teléfonos más grandes, que generalmente tienen alrededor de 415 px. El diseño para 320 px está muriendo porque esos iPhones más pequeños ahora tienen algunas generaciones. Si le gusta el análisis de tráfico de su sitio, debe encontrar que representa un porcentaje muy pequeño.

Answer 5

Esto podría ayudar: h5bp / mobile-boilerplate

Answer 6

No hay mejor ancho. Depende de los dispositivos a los que se dirige. El ancho óptimo para un iPhone 4s será diferente de un dispositivo Android mucho más grande.

Answer 7

<= 320 - iPhone, 480 Samsung, HTC, LG, Samsung, Motorola,
480px – HTC – 540 x 960HTC,
> 768px – Navegadores de tabletas, HTC, LG, Samsung, Motorola, Nokia
800- iPad
> 768px – Navegadores de tabletas

Answer 8

El ancho estándar para dispositivos móviles es de mínimo 320 px a máximo 480 px.

Si está utilizando un tema sensible de WordPress, la versión móvil se realiza automáticamente.

Para diseñadores que no sean cms, use esto: Bootstrap · El marco front-end más popular para dispositivos móviles y receptivo más popular del mundo.

Answer 9

320px