Blog
Guías sobre vista móvil, diseño responsive y trucos de Chrome del equipo de Mobile View Extension.
Extensiones de Chrome para desarrolladores web que vale la pena instalar
Extensiones de Chrome para desarrolladores web que cubren huecos reales de DevTools: herramientas de frameworks, accesibilidad, inspectores, vista móvil y seguridad.
Leer artículo →Breakpoints de Bootstrap 5 y grid responsive explicados
Breakpoints de Bootstrap 5, ancho de los contenedores, clases del grid responsive, mixins de Sass, utilidades de visualización y cómo personalizarlos y probarlos.
Leer artículo →Cómo cambiar el user agent en Chrome (sin extensiones)
Cambia el user agent en Chrome sin extensiones: Network conditions de DevTools, modo dispositivo, client hints, un parámetro de inicio y Playwright.
Leer artículo →Herramientas para desarrolladores de Chrome: guía práctica de DevTools
Guía práctica de las herramientas para desarrolladores de Chrome: cómo abrir DevTools, para qué sirve cada panel principal y los atajos que más tiempo ahorran.
Leer artículo →Emulador móvil de Chrome: cómo usar el modo dispositivo de DevTools
Guía paso a paso del emulador móvil integrado en Chrome: activa el modo dispositivo, elige o añade dispositivos, limita red y CPU, emula el tacto y haz capturas.
Leer artículo →Pruebas cross-browser: checklist práctica y herramientas gratis
Cómo probar una web en diferentes navegadores con poco presupuesto: qué navegadores cubrir, qué revisar y herramientas gratuitas como Playwright.
Leer artículo →Media queries en CSS explicadas, con ejemplos para móvil
Media queries en CSS explicadas: sintaxis, min-width frente a max-width, la sintaxis de rangos, funciones para móvil, modo oscuro y táctil, y errores comunes.
Leer artículo →La prueba de optimización para móviles de Google ya no existe: qué usar en su lugar
Google retiró su Mobile-Friendly Test en diciembre de 2023. Estas herramientas gratuitas lo sustituyen, y aquí tienes una rutina de 10 minutos para revisar una página.
Leer artículo →Cómo hacer una página web responsive: 10 cambios que importan
Diez cambios para hacer una página web responsive: etiqueta viewport, diseño fluido, zonas táctiles, formularios e imágenes, con código listo para copiar.
Leer artículo →Cómo probar un diseño responsive: un método que encuentra fallos reales
Método paso a paso para comprobar si una web es responsive: barrido de anchos, perfiles de dispositivos, pruebas de contenido extremo, zoom y capturas automáticas.
Leer artículo →Tamaño de pantalla y viewport del iPhone: la tabla completa
Todos los iPhone, del SE al iPhone 18 Pro Max: tamaño de pantalla, resolución, viewport CSS y densidad de píxeles, con notas para diseño web.
Leer artículo →Lighthouse en Chrome: auditoría móvil con DevTools o la extensión
Auditoría móvil de Lighthouse en Chrome DevTools, la extensión o la línea de comandos: ajustes, puntuaciones, por qué varían y qué arreglar primero.
Leer artículo →Cómo hacer que un sitio WordPress se vea bien en el móvil
Arreglos paso a paso para sitios WordPress que se ven mal en el teléfono: elección del tema, ajustes de bloques y maquetadores, menús, imágenes, plugins y pruebas.
Leer artículo →Mobile first: qué es y cómo aplicarlo en diseño y CSS
Qué significa mobile first para el contenido, el diseño y el CSS, en qué se diferencia de desktop first, un ejemplo de código y errores frecuentes.
Leer artículo →Test de velocidad web en móvil: cómo medir y mejorar la carga
Cómo hacer un test de velocidad móvil que sirva de algo: datos de campo y de laboratorio, umbrales de Core Web Vitals, herramientas gratuitas y arreglos que funcionan.
Leer artículo →Cómo hacer una captura de pantalla móvil de una página web desde el PC
Haz una captura de cualquier página web a tamaño de móvil desde Chrome en el ordenador: área visible o página completa, con o sin marco de dispositivo.
Leer artículo →Simulador móvil para Chrome: extensión o DevTools, cuál usar
En qué se diferencian las extensiones de simulador móvil para Chrome del modo dispositivo de DevTools, qué emula cada una y cómo elegir la herramienta adecuada.
Leer artículo →Checklist de pruebas de web móvil: 30 comprobaciones antes del lanzamiento
Un checklist práctico para probar una web en móvil: diseño, navegación, formularios, multimedia, velocidad, SEO y accesibilidad, con la herramienta para cada comprobación.
Leer artículo →Breakpoints responsive: valores habituales y cómo elegirlos
Breakpoints CSS habituales para móvil, tablet y escritorio, cómo se comparan Tailwind, Bootstrap y Material, y cómo elegir breakpoints a partir del contenido.
Leer artículo →Diseño responsive con Tailwind CSS: breakpoints y media queries
Cómo funciona el diseño responsive en Tailwind CSS v4: breakpoints por defecto, prefijos mobile first, variantes max y rangos, breakpoints propios y pruebas.
Leer artículo →Cómo probar localhost en el móvil (teléfono y vista móvil)
Abre un sitio local en un móvil real: IP de la red local y --host, reenvío de puertos de Chrome, túneles, direcciones en emuladores y soluciones habituales.
Leer artículo →Emulador Android online y para PC: cómo probar una web en Android
Prueba una web en Chrome para Android desde tu ordenador: vistas móviles en Chrome, el emulador de Android Studio y la depuración remota de un móvil real.
Leer artículo →Emulador de iPhone para PC: cómo probar una web en iPhone sin iPhone
Prueba una web en Safari de iPhone sin tener iPhone: Simulator de Xcode, inspector web de Safari, WebKit con Playwright y dispositivos en la nube.
Leer artículo →User agent switcher: qué hace y cuándo lo necesitas
Qué cambia un user agent switcher, por qué por sí solo no te da una vista móvil, qué papel tienen los client hints y cómo elegir una extensión segura.
Leer artículo →Cómo ver una página web como en el móvil desde el PC
Cuatro formas de abrir la versión móvil de cualquier web en el ordenador, qué muestra de verdad cada una y cuál usar para una comprobación rápida.
Leer artículo →Emulador de iPad: cómo ver una web como en una tablet en Chrome
Tres formas de ver una web en tamaño tablet en Chrome, los viewports de los iPad actuales y por qué Safari en iPad suele recibir la versión de escritorio.
Leer artículo →Etiqueta meta viewport: qué poner y por qué
Qué hace la etiqueta meta viewport en móvil, la línea que necesita toda página, los valores que conviene evitar y opciones nuevas como viewport-fit e interactive-widget.
Leer artículo →Por qué tu web se ve diferente en el móvil (y cómo arreglarlo)
Once motivos por los que una web se ve mal en el móvil, desde la falta de etiqueta viewport y la caché hasta el modo oscuro y Safari, y cómo arreglarlos.
Leer artículo →Qué es el diseño responsive: principios y ejemplos
El diseño web responsive explicado: de dónde viene, sus principios, la diferencia entre diseño responsive y adaptativo, las técnicas CSS actuales y cómo probarlo.
Leer artículo →Qué es el viewport y cómo saber su tamaño
El tamaño del viewport explicado: píxeles CSS frente a resolución de pantalla, device pixel ratio, layout y visual viewport, unidades svh y dvh y cómo consultar el tuyo.
Leer artículo →
Mira tu próximo sitio en versión móvil.
Añade la extensión y abre vistas de dispositivos en la misma pestaña en la que ya trabajas.