Herramienta web simple para obtener información del dispositivo, navegador y pantalla del usuario en tiempo real.
Este proyecto fue creado para facilitar tareas de ajustes CSS, validación responsive, soporte frontend y adaptación de gráficas o elementos visuales según el entorno real del cliente.
++++++++++++++++++++++++++++++++++++++++++++++++++++
[En] A simple web tool that provides real-time information about the user’s device, browser, and screen.
This project was built to streamline CSS adjustments, responsive design validation, frontend support, and the adaptation of charts or other visual elements to match the client’s actual environment.
+++++++++++++++++++++++++++++++++++++++++++++++++++
Puedes ver una versión publicada del proyecto aquí:
Ver demo online
Al abrir la página, la herramienta detecta y muestra información útil del dispositivo desde el navegador, como por ejemplo:
- Tipo de dispositivo
- Resolución del viewport
- Resolución de pantalla
- Navegador
- Sistema / plataforma
- Soporte táctil
- Device Pixel Ratio (DPR)
- Orientación de pantalla
- Safe Area
- Preferencias del usuario
- Datos técnicos del navegador
- Resumen listo para enviar por WhatsApp
Este proyecto es útil para casos como:
- Ajustes finos de CSS responsive
- Revisión de problemas visuales reportados por clientes
- Validación de breakpoints
- Adaptación de banners, gráficas o módulos HTML
- Diagnóstico rápido del entorno del usuario
- Soporte frontend con datos más precisos del dispositivo
- Detección automática de datos del navegador y pantalla
- Clasificación del dispositivo como
mobile,tabletodesktop - Detección de breakpoint según el ancho del viewport
- Visualización de datos técnicos en pantalla
- Copia rápida de resumen o JSON
- Enlace directo para enviar el resumen por WhatsApp
- Actualización automática al cambiar tamaño u orientación
- HTML5
- CSS3
- JavaScript Vanilla
- Bootstrap 5
/
├── index.html
├── README.md
└── assets/
├── css/
│ └── style.css
└── img/
└── preview.jpg