Edgesquare-Edge-2-Edge Display Simulator
Edgesquare เป็นตัวจำลองออนไลน์บนเว็บสำหรับจอแสดงผลแบบขอบบนมือถือด้วยรอยบากหรือรูปแบบอื่น ๆ ของการตัดกล้อง มันสามารถโหลดเว็บแอปของคุณผ่าน iframe และให้คุณเลือกอุปกรณ์จำนวนมากที่มีค่าที่ตั้งไว้ล่วงหน้าสำหรับแถบสถานะแถบนำทางการตัดกล้อง (รอยบากหลุม ฯลฯ ) และคุณสมบัติอื่น ๆ นอกจากนี้คุณสามารถตั้งค่าสีของคุณเองสำหรับแถบสถานะและแถบการนำทางเพื่อลองปรับแต่งการออกแบบ
ตรวจสอบว่าเว็บแอปพลิเคชันของคุณดูสมาร์ทโฟนที่ทันสมัยอย่างไร! -
เริ่มต้น
- โฮสต์เว็บไซต์บนเซิร์ฟเวอร์ของคุณหรือไปที่: https://byteteilchen.de/edge-2-edge/
- ป้อน URL ของเว็บแอปพลิเคชันของคุณ (หรือเล่นกับ Sepia Open Assistant Demo ซึ่งเป็นโครงการโอเพนซอร์ซที่ยอดเยี่ยมอีกโครงการหนึ่ง ^^)
- เลือกอุปกรณ์จากตัวเลือก
- ปรับสีตามต้องการ
- ค้นพบว่าเว็บไซต์/แอพของคุณมีลักษณะอย่างไรบนการแสดงผลโทรศัพท์มือถือที่ทันสมัย
ปัญหาที่รู้จัก
- เนื่องจากอุปกรณ์ถูกกำหนดโดยขนาดของวิวพอร์ตและ ไม่ใช่ขนาดทางกายภาพของพวกเขา บางคนอาจดูใหญ่กว่าอุปกรณ์อื่นหรือขนาดเท่ากันเมื่อพวกเขามีขนาดเล็กกว่าจริง (หรือในทางกลับกัน) อย่างไรก็ตามสิ่งนี้ แสดง ถึงพื้นที่ที่เว็บไซต์หรือแอพจะมีในอุปกรณ์เฉพาะ! ใช้ 'สเกลอุปกรณ์' สลับและสเกลปัจจัยเพื่อรับประมาณ ขนาดจริงของอุปกรณ์
- แอพลูก (แอปเริ่มต้นผ่าน 'แอพ URL') ทำงานใน iframe ของหน้าหลักและดังนั้นจึงอาจดูไม่เหมือนรุ่นมือถือ ขึ้นอยู่กับว่าแอปลูกทำปฏิกิริยากับ 'ตัวแทนผู้ใช้' และการปรับสเกลวิวพอร์ตของเบราว์เซอร์อย่างไร
- หากคุณต้องการจำลอง 'ตัวแทนผู้ใช้' อื่น ๆ เช่นเบราว์เซอร์มือถือคุณสามารถใช้ส่วนขยายเบราว์เซอร์ของซีเปียโอเพียโอเพียโอเพ่นสำหรับ Chrome: Sepia Framework Tools หรือเครื่องมือนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ ;-)
- HTML Meta Property 'ธีมสี' ถูกละเว้น (ในข้อมูลทั่วไปจากภายใน iframe ไม่ได้ส่งมอบให้กับผู้ปกครอง)
ภาพหน้าจอ
ใบอนุญาต
โครงการนี้ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT Open-Source มันเขียนในวานิลลา JS และมีเพียงไม่กี่พึ่งพา:
- Pickr - ตัวเลือกสีที่ทำงานข้ามเบราว์เซอร์ - ใบอนุญาต MIT
- SVG -Inject - เครื่องมือในการสร้างภาพ SVG ที่มีสไตล์ - ใบอนุญาต MIT
- Web Fonts จาก Google Material Icons - Apache License Version 2.0
- ไอคอน SVG บางส่วนจากโครงการไอคอน Simple - CC0 1.0 Universal Licenseal
