Edgesquare-simulador de exibição Edge-2-Edge
O Edgesquare é um simulador on-line baseado na Web para exibições móveis de ponta a ponta com Notch ou qualquer outra forma de recorte da câmera. Ele pode carregar seu aplicativo da web via iframe e permite escolher entre vários dispositivos com predefinições para a barra de status, barra de navegação, recorte da câmera (entalhes, buracos etc.) e algumas outras propriedades. Além disso, você pode definir suas próprias cores para barra de status e barra de navegação para experimentar alguns ajustes de design.
Confira como seu aplicativo da Web realmente olha para os smartphones modernos! ;-)
Começando
- Hospede o site em seu servidor ou simplesmente vá para: https://byteteilchen.de/edge-2-edge/ed
- Digite o URL do seu aplicativo da web (ou brinque com a demonstração do Sépia Open Assistant, outro grande projeto de código aberto ^^)
- Escolha um dispositivo do seletor
- Ajuste as cores conforme necessário
- Descubra como seu site/aplicativo se parece em uma exibição moderna de telefone celular
Questões conhecidas
- Como os dispositivos são definidos pelo tamanho da viewport e não pelo tamanho físico, alguns podem parecer maiores que outros ou de tamanho idêntico quando são realmente menores (ou vice -versa). No entanto , isso representa o espaço que um site ou aplicativo terá em um dispositivo específico! Use o fator de alternância e escala da 'escala do dispositivo' para obter as aprox. tamanho real de um dispositivo.
- O aplicativo Child (o aplicativo iniciado via 'aplicativo URL') é executado em um iframe da página pai e, portanto, pode não parecer exatamente com a versão móvel. Isso depende de como o aplicativo infantil reage ao navegador 'agente de usuário' e escala de viewport.
- Se você precisar simular um 'agente de usuário' diferente, por exemplo, de um navegador móvel, você pode usar esta extensão do navegador de código aberto sépia para ferramentas de estrutura do Chrome: Sepia ou as ferramentas do desenvolvedor do seu navegador ;-)
- O HTML Meta Property 'cor-cor' é ignorado (em dados gerais de dentro do iframe não são entregues ao pai).
Capturas de tela
Licenças
Este projeto está licenciado sob a licença de código aberto do MIT. Está escrito em JS de baunilha e inclui muito poucas dependências:
- Pickr - Picker de cores que trabalham no navegador cruzado - MIT Licença
- Ferramenta SVG -Inject - para criar imagens SVG estiláveis - MIT Licença
- Fontes da Web do Google Material Icons - Apache License Versão 2.0
- Alguns ícones SVG do projeto de ícones simples - CC0 1.0 Licença Universal
