Simular una ventana móvil

En maquetación para no batallar tanto con el responsive, siempre es bueno trabajar con medidas relativas y no absolutas, así ahorras muchas media queries!

El Device Mode es útil para saber de manera aproximada cuál será el aspecto y el rendimiento de tu página en un dispositivo móvil.

Device Mode es el nombre de un conjunto variado de funciones en Chrome DevTools que te ayudan a simular dispositivos móviles. Estas funciones incluyen:

• Simulación del viewport de un dispositivo móvil
• Limitación de la red
• Limitación de la CPU
• Simulación de la ubicación geográfica
• Configuración de la orientación
  
  

A modo de anécdota, me di cuenta que hay tamaños inferiores a 320px:
Una vez, hice una página web y le hice el diseño responsivo para una pantalla de 320px, pero al momento de testearlo en mi MotoC, se veía con los elementos remontados y todo andaba roto.
Ahí mismo fui y revisé mi página en un Samsumg que tenía la misma dimensión de mi motoC y ahí se veía bien.
Entonces me puse a mirar la configuración de mi motoC y me di cuenta que tenia configurada la pantalla con elementos “Grandes”.
Luego de esa experiencia, diseño mis páginas web con resolución mínima de 250px (aunque toque remontar elementos, al menos intento dejarlos lo más funcional posible).

Genial, la parte de simular dispositivos ya lo sabía, pero no me había dado cuenta de que tenía los breakpoints ahí jaja, apenas los acabo de ver, algo interesante de esta herramienta es que no solo cambia el tamaño de la pantalla (Tal como lo harías trabajando únicamente con el viewport), sino que también emula el navegador tal cual de ese dispositivo y lo escala a como se vería en ese dispositivo, por eso es que es mucho más profesional trabajar con esta herramienta

Hoy en si hay dispositivos más pequeños que 320px, un ejemplo los smart watch

Otra app que sirve mucho para trabajar con responsive link para descargar.

En Firefox, en la pestaña de Estilos
El panel de media queries se resaltan las media queries que estén activas según el tamaño del viewport

Editando desde el filesystem el proyecto del curso practico de animaciones

Al que le interese el tema le recomiendo que tome el curso de Responsive Desing. Además de ser muy interesante el profe es Diego De Granda (El profe de este mismo curso) y es realmente bueno. Se los super recomiendo!

Trabajar con “show media queries” me parece bueno, porque nos muestra las media queries que estamos manejando nosotros en nuestro archivo CSS que no siempre seran las que tiene el Mode Device por defecto, capaz algunas coincidirán pero no todas. Me parece más personalizado y no cuesta nada.

1:31 Alternando vista con Toggle device toolbar.

2:06 Break Points (media querys). Dimensiones más comunes.

3:39 Emulando dispositivos móviles.

8:01 Mostrar media querys del proyecto.

8:18 Agregando Tipo de dispositivo. Si se trata de un dispositivo móvil touch o no touch, o si se trata de un desktop touch o no touch.

9:04 Mostrar el frame del dispositivo móvil. No está disponible para todos los dispositivos.

9:56 Device pixel ratio. Es una forma de modificar los pixels del dispositivo que se está emulando.

12:36 Online. Para emular una conexión media o baja típica de un operador móvil.

Enlaces de la clase:
Curso de Responsive Design
Enlaces complementarios:
Simulación de dispositivos móviles con Device Mode en Chrome DevTools
Comenzar con la depuración remota de dispositivos Android
Depurar Progressive Web App
WebViews con depuración remota
Comentarios valiosos de la comunidad: 1, 2, 3

Cuéntame si parece útil este formato de resumen, y dale 💚 si quieres más de estos para la comunidad 😁🙌

Aqui es donde nos damos cuenta que el diseno mobile first nos ayuda mucho para hacer nuestra web responsive

1. Trabajar por dispositivos
2. Trabajar por MediaQuerys que nos dan las DevTools

Anécdota de un estudiante

https://yosefblandin.github.io/Google_Clone/

Luego de haber pasado por tantos profes, facil diego de Granda entra en el top 3 de Platzi

Ojala suba más cursos

Los dispositivos que aparecen sin marco es porque literalmente no tienen en su versión real o por lo menos son muy delgados a diferencia de los iphone 7 para abajo.

una pagina muy buena que te proporciona el ancho de tu pantalla a demás la comparaciones y medidas mas usadas de pantallas.
https://www.mydevice.io/

Esta herramienta es mas especializada https://polypane.app/ para manejar responsive

Está bien las cosas, había algunas que las olvidé.

Es increible la forma de usar “DevTools” en la parte a aplicaciones mobiles. Me quede impresionado, ni sabia de este procedimiento. Me quedo claro con este ejemplo que hizo el profe. A seguir.

A seguir aprendiendo. Móvil

El dpr parámetro agrega la capacidad de servir imágenes de tamaño correcto para dispositivos que exponen una proporción de píxeles de dispositivo . La proporción de píxeles del dispositivo es la proporción entre píxeles físicos y píxeles lógicos. Por ejemplo, el iPhone 5 reporta una proporción de píxeles del dispositivo de 2, porque la resolución lineal física es el doble de la resolución lógica.

Resolución física: 960 x 640
Resolución lógica: 480 x 320

https://yosefblandin.github.io/Google_Clone/

Me gusto mucho la clase, estoy aprendiendo mucho. Gracias.

Muy buena clase!

Interesante funcionalidad de DevTools para hacer mas real la programación de dispositivos móviles

Siempre me ha gustado trabajado entre las resoluciones que ofrece Dev Tools así puedo saber como se está comportando cada elemento y no asumir que esa resolución podría ser la correcta, lo recomiendo.

Aqui les dejo las medidas disponibles de las pantallas:
https://www.mydevice.io/

Es chido, pero extresante, debes tratar de no ver todo todo, no solo este curso de corrido si no con calma y practicar aunque sea un poco, porque si no te extresas de ver y ver y ver y sentir que no avanzas, pero no hay peor paso que el que no se da.

Pro Tip: No recomiendo usar el dev tool de IOS en el navegador, ya que es engañoso, muchas veces te muestra que esta bien pero cuando lo pruebas en un dispositivo físico de IOS puede estar mal maquetado, en esos casos es mejor usar xcode para usar el simulador o apuntarse desde un celular al computador para simular el localhost

Otra de las ventajas de emular ventanas de móviles es que te permite ajustar los break points de tus media queries y que tu proyecto se vea fantástico, agregando un gran valor de UX

No me imagino estar haciendo Breakpoints por cada dispositivo D:
Esta clase estuvo super interesante y llena de valor.
Muchas Gracias 💚

Aca les comparto esta app que me servio de mucha ayuda para poder visualizar multiples dispositivos a la vez

responsively