Téléchargement edge sq display simulator - edge sq display simulator Télécharger

edge sq display simulator

Autre code source

1.0.0

Télécharger

EdgeSquare - Simulator d'affichage Edge-2-Edge

EdgeSquare est un simulateur en ligne basé sur le Web pour les écrans mobiles de bord à bord avec encoche ou toute autre forme de découpe de caméra. Il peut charger votre application Web via IFRAME et vous permet de choisir parmi un certain nombre d'appareils avec des préréglages pour la barre d'état, la barre de navigation, la découpe de la caméra (encoches, trous, etc.) et d'autres propriétés. De plus, vous pouvez définir vos propres couleurs pour la barre d'état et la barre de navigation pour essayer quelques ajustements de conception.

Découvrez à quoi ressemble vraiment votre application Web sur les smartphones modernes! ;-)

Commencer

Hébergez le site Web sur votre serveur ou allez simplement sur: https://byteteilchen.de/edge-2-edge/
Entrez l'URL de votre application Web (ou jouez avec la démo Sépia Open Assistant, un autre grand projet open-source ^^)
Choisissez un appareil dans le sélecteur
Ajustez les couleurs au besoin
Découvrez à quoi ressemble votre site Web / application sur un affichage de téléphone mobile moderne

Problèmes connus

Étant donné que les appareils sont définis par la taille de leur fenêtre et non leur taille physique, certains peuvent sembler plus grands que d'autres ou de taille identique lorsqu'ils sont réellement plus petits (ou vice versa). Néanmoins , cela représente l'espace qu'un site Web ou une application aura sur un appareil spécifique! Utilisez le facteur de bascule et d'échelle de l'échelle de l'appareil pour obtenir l'env. Taille réelle d'un appareil.
L'application enfant (l'application a commencé via «URL de l'application») s'exécute dans un iframe de la page parent et donc il pourrait ne pas ressembler exactement à la version mobile. Cela dépend de la façon dont l'application Child réagit à la mise à l'échelle de l'agent utilisateur du navigateur et de la fenêtre.
Si vous avez besoin de simuler un autre «agent utilisateur» par exemple d'un navigateur mobile, vous pouvez utiliser cette extension de navigateur open-source sépia pour Chrome: outils de framework sépia ou les outils du développeur de votre navigateur ;-)
HTML Meta Property 'Theme-Color' est ignoré (dans les données générales de l'intérieur de l'IFRAME n'est pas remise au parent).