¿Necesita acceder a un emulador de navegador de teléfono inteligente en su PC para probar la versión móvil de un sitio web que le interesa? Tal vez usted es un desarrollador web, o quiere convertirse en uno, y necesita simular un navegador móvil para el proyecto en el que está trabajando. Independientemente(Regardless) de sus razones, aquí le mostramos cómo acceder a un emulador de navegador móvil en Google Chrome , Mozilla Firefox , Microsoft Edge y Opera:
Cómo encender y usar el emulador de navegador móvil en Google Chrome
En Google Chrome , navegue al sitio web que desea ver en el emulador de navegador móvil. Luego, presione las CTRL + SHIFT + I en su teclado o, con el mouse, haga clic en los tres puntos verticales en la esquina superior derecha para abrir el menú «Personalizar y controlar Google Chrome»(“Customize and control Google Chrome”) . Elija Más herramientas,(More tools, ) seguido de Herramientas para desarrolladores(Developer Tools) .
Acceda a las herramientas para desarrolladores(Access Developer Tools) en Google Chrome
Haga clic o toque el botón «Alternar barra de herramientas del dispositivo»(“Toggle device toolbar”) (parece un teléfono inteligente al lado de una tableta) o presione CTRL + Shift + M en su teclado. Esto activa la barra de herramientas del dispositivo donde se carga la página móvil. De forma predeterminada, la barra de herramientas del dispositivo utiliza una plantilla receptiva(Responsive) para el sitio que cargó. Haga clic(Click) en él y elija el dispositivo móvil que desea emular. Sus opciones incluyen muchos iPhones, iPads, Surface Duo , dos dispositivos Samsung Galaxy y un simulador de navegador móvil Moto G4 para PC.(Moto G4 mobile)
Cómo habilitar el emulador de navegador móvil en Google Chrome
SUGERENCIA:(TIP:) Desafortunadamente, puede usar el método abreviado de teclado CTRL + Shift + M
Navegue(Navigate) por el sitio que desea probar, cambie entre los diferentes teléfonos inteligentes y tabletas y vea cómo se ve. Cuando haya terminado, presione el botón X (Cerrar)(X (Close)) en la esquina superior derecha de las herramientas para desarrolladores de Google Chrome para volver al modo de navegación de escritorio estándar.
Cerrar el emulador de navegador móvil Google Chrome
SUGERENCIA:(TIP:) si es un gran usuario de Google Chrome , también puede querer aprender a usar las opciones de control de medios de Google Chrome(how to use Google Chrome’s media control options) .
Cómo encender y usar el emulador de navegador móvil en Mozilla Firefox
En Mozilla Firefox , abra el sitio para el que desea utilizar un simulador de navegador móvil. Luego, presione CTRL + Shift + M en su teclado o haga clic en el botón de hamburguesa en la esquina superior derecha para abrir el menú de Firefox y elija Desarrollador web(Web Developer) .
Accede a las herramientas de desarrollo web en (Web Developer)Firefox
Verá un menú lleno de herramientas que son útiles para los desarrolladores web. En la lista, seleccione «Modo de diseño receptivo»,(“Responsive Design Mode,”) y este modo particular de ver una página web se carga en Firefox .
Elija el modo de diseño receptivo(Responsive Design Mode) en Firefox
Firefox habilita el modo de diseño receptivo(Responsive Design Mode) . En la parte superior de la ventana, verá los parámetros utilizados por este modo de emulación. Si no se selecciona ningún dispositivo, haga clic o toque Responsive para abrir una lista desplegable con dispositivos disponibles para la emulación y luego elija el que desea simular.
Puede simular el navegador móvil para muchos iPhones, iPad, Kindle Fire ( Firefox es el único navegador que ofrece esta opción de emulación) y dispositivos Samsung Galaxy S9 .
Usa el emulador de navegador móvil en Firefox
Cuando haya terminado de probar con el emulador de navegador de teléfono inteligente, presione el botón X (Cerrar el modo de diseño receptivo)(X (Close Responsive Design Mode)) en la esquina superior derecha de Mozilla Firefox .
Cierre el emulador de navegador móvil en Firefox
Ha vuelto al modo de navegación de escritorio estándar.
Cómo encender y usar el emulador de navegador móvil en Microsoft Edge
Microsoft Edge usa el mismo motor de renderizado que Google Chrome y ofrece los mismos emuladores de navegador para teléfonos inteligentes. Para acceder a ellos, visite el sitio web que desea probar y presione las CTRL + SHIFT + I en su teclado o haga clic en los tres puntos horizontales ( «Configuración y más»(“Settings and more”) ) en la esquina superior derecha de Microsoft Edge . En el menú que aparece, ve a Más herramientas(More tools) y luego a Herramientas para desarrolladores(Developer Tools) .
Accede a las herramientas de desarrollador en (Developer)Microsoft Edge
Haga clic en el botón «Alternar emulación de dispositivo»(“Toggle device emulation”) (parece un teléfono inteligente al lado de una tableta) o presione CTRL + Shift + M en su teclado. Esto activa la barra de herramientas del emulador de navegador móvil. De forma predeterminada, utiliza una plantilla receptiva(Responsive) para el sitio que cargó. Haga clic(Click) en él y elija el dispositivo móvil que desea emular. Sus opciones incluyen los mismos teléfonos inteligentes y tabletas que Google Chrome .
Accede al emulador de navegador móvil en Microsoft Edge
Explore el sitio que desea probar, cambie entre los diferentes dispositivos móviles y vea cómo se ve. Cuando haya terminado, presione el botón X (Cerrar)(X (Close)) en la esquina superior derecha de Microsoft Edge.
Cierre el emulador de navegador móvil en Microsoft Edge
Ahora está de vuelta en el modo de navegación de escritorio estándar.
Cómo encender y usar el emulador de navegador móvil en Opera
En Opera , visita la página web que deseas ver como si estuvieras usando un dispositivo móvil. Luego haga clic en el icono de Opera en la parte superior izquierda ( «Personalizar y controlar Opera»(“Customize and control Opera”) ). En el menú que se abre, elija Desarrollador(Developer) seguido de Herramientas(Developer tools) de desarrollador . Si prefiere el teclado, presione las CTRL+Shift+I para obtener el mismo resultado.
Accede a las herramientas de desarrollador en Opera
Las herramientas del desarrollador( Developer tools) se muestran en el lado derecho de la ventana del navegador. Haga clic en el botón «Alternar barra de herramientas del dispositivo»(“Toggle device toolbar”) (parece un teléfono inteligente al lado de una tableta) o presione CTRL + Shift + M en su teclado. La barra de herramientas del dispositivo se muestra a la izquierda. De forma predeterminada, utiliza una plantilla receptiva(Responsive) para el sitio que cargó. Haz clic(Click) en él y elige el dispositivo móvil que quieres emular de la lista de opciones. Opera ofrece los mismos emuladores de navegadores móviles que Google Chrome y Microsoft Edge , ya que se basa en el mismo motor de renderizado ( Chromium ).
Accede al emulador de navegador móvil en Opera
Cuando termine de probar, presione el botón X ( Cerrar(Close) ) en la esquina superior derecha para volver al modo de navegación de escritorio estándar.
Cierre el emulador de navegador móvil en Opera
¿(Are) Está satisfecho con las opciones de emulación de navegador móvil disponibles?
Ahora ya sabes cómo emular todo tipo de dispositivos móviles en tu navegador web favorito. Sin embargo, puede notar que la mayoría de los navegadores web ofrecen las mismas opciones de emulación que favorecen a los iPhone y iPad. Si desea emular un teléfono inteligente o tableta Android moderno, sus posibilidades son bastante escasas, incluso en (Android)Google Chrome , el navegador desarrollado por la compañía detrás de Android . Si desea obtener los mejores resultados, es posible que deba usar dos navegadores para esta tarea: Chrome y Firefox , Firefox y Edge u Opera . Antes de ir, cuéntenos lo que piensa acerca de las opciones disponibles.
