Edgesquare-محاكاة عرض Edge-2-Edge
Evgesquare هو محاكاة على الإنترنت على شبكة الإنترنت لشاشات الحافة إلى الحافة مع Notch أو أي شكل آخر من أشكال قطع الكاميرا. يمكنه تحميل تطبيق الويب الخاص بك عبر iframe ويتيح لك الاختيار من بين عدد من الأجهزة مع إعدادات مسبقة لشريط الحالة ، وشريط التنقل ، وقصص الكاميرا (الشقوق ، والثقوب ، وما إلى ذلك) وبعض الخصائص الأخرى. بالإضافة إلى ذلك ، يمكنك تعيين ألوانك الخاصة لشريط الحالة وشريط التنقل لتجربة بعض تعديلات التصميم.
تحقق من كيف يبدو تطبيق الويب الخاص بك حقًا على الهواتف الذكية الحديثة! ؛-)
ابدء
- استضافة موقع الويب على الخادم الخاص بك أو ببساطة انتقل إلى: https://byteteilchen.de/edge-2-edge/
- أدخل عنوان URL الخاص بتطبيق الويب الخاص بك (أو العب مع عرض Sepia Open Assistant Demo ، وهو مشروع رائع آخر مفتوح المصدر ^^)
- اختر جهازًا من المحدد
- ضبط الألوان حسب الحاجة
- اكتشف كيف يبدو موقع الويب الخاص بك/التطبيق على شاشة الهاتف المحمول الحديثة
القضايا المعروفة
- نظرًا لأن الأجهزة محددة من خلال حجم المنفذ الخاص بها ، وليست حجمها المادي قد يبدو أن بعضها قد يبدو أكبر من غيرها أو متطابق في الحجم عندما تكون أصغر بالفعل (أو العكس). ومع ذلك ، فإن هذا يمثل المساحة التي سيكون بها موقع ويب أو تطبيق على جهاز معين! استخدم "مقياس الجهاز" للتبديل وعامل التحجيم للحصول على التقريب. الحجم الحقيقي للجهاز.
- يعمل تطبيق الطفل (التطبيق الذي بدأ عبر "url url") في iframe من صفحة الأصل ، وبالتالي قد لا يبدو تمامًا مثل إصدار الهاتف المحمول. هذا يعتمد على كيفية تفاعل تطبيق الطفل مع المتصفح "وكيل المستخدم" وتوسيع نطاق عرض المنفذ.
- إذا كنت بحاجة إلى محاكاة "وكيل مستخدم" مختلف على سبيل المثال لمتصفح الهاتف المحمول ، يمكنك استخدام امتداد متصفح Sepia المفتوح للمصدر هذا لـ Chrome: Sepia Framework Tools أو Admosts of Browser ؛-)
- يتم تجاهل خاصية HTML META "Comply" (في البيانات العامة من داخل iframe لا يتم تسليمها إلى الوالد).
لقطات الشاشة
التراخيص
هذا المشروع مرخص بموجب ترخيص معهد ماساتشوستس للتكنولوجيا مفتوح المصدر. إنه مكتوب في الفانيليا JS ويتضمن سوى عدد قليل جدًا من التبعيات:
- Pickr - Color Picker الذي يعمل عبر المتصفح - ترخيص معهد ماساتشوستس للتكنولوجيا
- SVG Binject - أداة لإنشاء صور SVG قابلة للتصميم - ترخيص MIT
- خطوط الويب من رموز مواد Google - إصدار ترخيص Apache 2.0
- بعض أيقونات SVG من مشروع الرموز البسيطة - CC0 1.0 Universal License
