Edgesquare-Simulador de visualización de borde-2
Edgesquare es un simulador en línea basado en la web para pantallas de borde móvil con muesca o cualquier otra forma de recorte de la cámara. Puede cargar su aplicación web a través de iframe y le permite elegir entre varios dispositivos con presets para la barra de estado, barra de navegación, recorte de la cámara (muescas, agujeros, etc.) y algunas otras propiedades. Además, puede configurar sus propios colores para la barra de estado y la barra de navegación para probar algunos ajustes de diseño.
¡Vea cómo se ve realmente su aplicación web en los teléfonos inteligentes modernos! ;-)
Empezando
- Aloje el sitio web en su servidor o simplemente vaya a: https://byteteilchen.de/edge-2-eded/
- Ingrese la URL de su aplicación web (o juegue con la demostración de Asistente Open Sepia, otro gran proyecto de código abierto ^^)
- Elija un dispositivo del selector
- Ajuste los colores según sea necesario
- Descubra cómo se ve su sitio web/aplicación en una pantalla moderna de teléfono móvil
Problemas conocidos
- Dado que los dispositivos se definen por el tamaño de su visión y no su tamaño físico, algunos pueden parecer más grandes que otros o de tamaño idéntico cuando en realidad son más pequeños (o viceversa). Sin embargo , esto representa el espacio que un sitio web o aplicación tendrá en un dispositivo específico. Use el factor de alternación y escala de 'escala del dispositivo' para obtener el aprox. tamaño real de un dispositivo.
- La aplicación infantil (la aplicación iniciada a través de 'APP URL') se ejecuta en un iframe de la página principal y, por lo tanto, podría no verse exactamente como la versión móvil. Esto depende de cómo reaccione la aplicación infantil al navegador 'agente de usuario' y la escala de la ventana gráfica.
- Si necesita simular una diferente 'agente de usuario', por ejemplo, de un navegador móvil, puede usar esta extensión del navegador de código abierto Sepia para Chrome: Sepia Framework Tools o las herramientas de desarrollador de su navegador ;-)
- Se ignora el 'color del tema' HTML meta (en general, los datos del interior del nombre no se entregan al padre).
Capturas de pantalla
Licencias
Este proyecto tiene licencia bajo la licencia de código abierto del MIT. Está escrito en Vanilla JS e incluye solo muy pocas dependencias:
- Pickr - Picker de color que funciona con el navegador - Licencia del MIT
- SVG -Inject: herramienta para crear imágenes SVG estilables - Licencia del MIT
- Fuentes web de íconos de material de Google - Licencia de Apache Versión 2.0
- Algunos iconos SVG del proyecto de iconos simples - Licencia universal CC0 1.0
