ออกแบบเลย์เอาต์ของแคนวาสสำหรับหน้าจอขนาดต่างๆ

คุณสามารถออกแบบเลย์เอาต์ของแคนวาสให้พอดีกับอุปกรณ์ที่มีขนาดแตกต่างกัน เพื่อปรับให้เนื้อหาเหมาะพอดีกับเบราเซอร์สำหรับหน้าจอแต่ละขนาดมากที่สุด

หัวข้อต่างๆ มีดังนี้

ข้อมูลเกี่ยวกับการออกแบบเลย์เอาต์ของแคนวาสเพื่อแสดงบนอุปกรณ์ที่มีขนาดหน้าจอแตกต่างกัน

คุณสามารถออกแบบเลย์เอาต์ของแคนวาสให้พอดีกับอุปกรณ์ที่มีขนาดแตกต่างกัน เพื่อให้เหมาะกับเนื้อหาในเบราเซอร์มากที่สุด เช่น บนอุปกรณ์มือถือ แท็บเล็ต หรือแล็ปท็อป

เพิ่มประสิทธิภาพเลย์เอาต์ของแคนวาสสำหรับหน้าจอขนาดต่างๆ

เมื่อคุณเปิดเวิร์กบุคบนอุปกรณ์ที่มีขนาดแตกต่างกัน ขนาดหน้าจอของแคนวาสจะปรับสเกลตามขนาดหน้าจอเบราเซอร์ โดยใช้ค่าดีฟอลต์ของเบราเซอร์ การปรับขนาดเบราเซอร์โดยการลดขนาดจะส่งผลต่อความสามารถในการมองเห็นรายละเอียดต่างๆ ในการแสดงข้อมูล ตัวอย่างเช่น การอ่านข้อมูลในกราฟกระจาย, แผนที่ความร้อน หรือข้อมูลการวัดในการแสดงข้อมูลไทล์อาจลำบากมากขึ้น ทำให้ไม่สามารถมองเห็นข้อมูลที่สำคัญได้

เมื่อคุณลดขนาดแคนวาสในเบราเซอร์ การแสดงข้อมูลจะมีขนาดเล็กเกินกว่าจะแสดงผลได้อย่างถูกต้อง
รูปภาพนี้แสดงขนาดหน้าจอแคนวาสที่ลดลงเมื่อดูในเบราเซอร์ โดยที่การแสดงข้อมูลบางรายการอาจมีขนาดเล็กเกินกว่าที่จะเห็นข้อมูลได้อย่างถูกต้อง

ในฐานะผู้สร้าง คุณสามารถออกแบบจุดพักของแคนวาสเพื่อให้การแสดงข้อมูลเปลี่ยนแปลงให้พอดีกับขนาดหน้าจอใหม่ เมื่อหน้าจอแคนวาสมีขนาดลดลง ตัวอย่างเช่น หากขนาดหน้าจอที่ใช้ได้เล็กเกินกว่าที่จะแสดงข้อมูลที่ครบถ้วนสมบูรณ์ คุณสามารถจัดเรียงใหม่หรือซ่อนการแสดงข้อมูล เพื่อให้สามารถทำงานได้ดีขึ้นด้วยขนาดหน้าจอที่เล็กลง คุณระบุขนาดและเลย์เอาต์ของหน้าจอแคยวาสที่แตกต่างกันด้วยจุดพักของแคนวาส โดยที่จุดพักแต่ละรายการแทนการจัดเรียงการแสดงข้อมูลที่แตกต่างกันที่ปรากฏบนหน้าจอแต่ละขนาด

แคนวาสที่ปรับให้เหมาะสมสำหรับจุดพักของหน้าจอที่มีขนาดเล็กกว่า ประกอบด้วยการแสดงข้อมูลที่ได้รับการจัดเรียงใหม่เพื่อให้สามารถดูข้อมูลได้ง่ายดายยิ่งขึ้นบนอุปกรณ์ที่เล็กลง
รูปภาพนี้แสดงการแสดงข้อมูลที่ปรับให้เหมาะสม ซึ่งสร้างด้วยจุดพักสำหรับอุปกรณ์ที่มีหน้าจอขนาดเล็กกว่า

คุณใช้ตัวเลื่อนในการกำหนดขนาดหน้าจอ เมื่อผู้ใช้แสดงแคนวาสบนอุปกรณ์ที่มีขนาดแตกต่างกัน ตัวอย่างเช่น คุณสามารถเปลี่ยนวิธีการแสดงข้อมูลได้โดยการจัดเรียงตำแหน่ง ขนาด หรือการแสดงผลบนแคนวาสได้

เมื่อคุณเพิ่มจุดพักในแคนวาส ขนาดหน้าจอของจุดพักจะกำหนดวิธีการแสดงข้อมูลเมื่อดูด้วยขนาดหน้าจอนั้นๆ คุณสามารถปรับตำแหน่ง ปรับขนาด หรือย้ายการแสดงข้อมูลออกสำหรับจุดพักของแคนวาส เพื่อปรับการแสดงข้อมูลที่ผู้ใช้จะมองเห็นให้เหมาะสม คุณสามารถระบุคอนฟิเกอเรชันการแสดงข้อมูลที่ต่างกันให้กับจุดพักแต่ละรายการ และความแตกต่างของจุดพักแต่ละรายการจะปรากฏให้ผู้ใช้เห็น ก็ต่อเมื่อความละเอียดของขนาดหน้าจอเบราเซอร์ตรงกับขนาดหน้าจอของจุดพักซึ่งมีการเปลี่ยนแปลงเท่านั้น

ออกแบบเลย์เอาต์ของแคนวาสเพื่อดูบนอุปกรณ์ที่ต่างกัน

คุณสามารถสร้างจุดพักของแคนวาสเพื่อกำหนดวิธีการแสดงข้อมูลบนอุปกรณ์ที่มีขนาดหน้าจอที่แตกต่างกันให้กับผู้ใช้ ตัวอย่างเช่น คุณสามารถตั้งค่าจุดพักที่ต่างกัน เพื่อปรับการดูข้อมูลให้เหมาะสมบนเบราเซอร์ของอุปกรณ์เคลื่อนที่ แท็บเล็ต หรือแล็ปท็อป

ไอคอนแนะนำการใช้งาน แนะนำการใช้งาน

  1. บนโฮมเพจ ให้วางเคอร์เซอร์เหนือเวิร์กบุค คลิก การดำเนินการ แล้วเลือก เปิด
  2. คลิก แก้ไข เพื่อแสดงเวิร์กบุคสำหรับแก้ไข
  3. ขยายแคนวาสเป็นขนาดสูงสุด และใน คุณสมบัติของแคนวาส ให้ตั้งค่า เลย์เอาต์ เป็นพอดีอัตโนมัติ แล้วคลิก ตกลง
  4. บนส่วนท้าย คลิก โปรแกรมแก้ไขแคนวาสแบบตอบสนอง เพื่อเปิดโปรแกรมแก้ไขที่คุณสามารถกำหนดจุดพักเพื่อดูแคนวาสบนอุปกรณ์ต่างๆ ได้
    โปรแกรมแก้ไขแคนวาสแบบตอบสนอง

  5. ตั้งค่าจุดพักของแคนวาส ดังนี้
    • เพิ่มจุดพักที่ตำแหน่งตัวเลื่อนปัจจุบัน - คลิกและลากตัวเลื่อนไปยังค่าพิกเซลสำหรับขนาดหน้าจอที่คุณต้องการใช้กับจุดพักนี้
      ลากตัวเลื่อนไปยังความกว้างที่ต้องการโดยแสดงหน่วยเป็นพิกเซล

      แล้วคลิก เพิ่มจุดพัก คลิกไอคอน 'เพิ่มจุดพัก' เพื่อเพิ่มจุดพักในตำแหน่งที่มีตัวเลือกอยู่เพื่อเพิ่มจุดพักที่ตำแหน่งตัวเลื่อนปัจจุบัน
    • ป้อนค่าสำหรับจุดพักด้วยตนเอง - คลิก เปิดเมนูโปรแกรมแก้ไขแคนวาสแบบตอบสนอง คลิก เพิ่มจุดพัก แล้วป้อนตัวเลขในฟิลด์ ตำแหน่ง สำหรับตำแหน่งที่คุณต้องการเพิ่มจุดพักนี้
      ป้อนตำแหน่งด้วยตนเองเพื่อเพิ่มจุดพัก

  6. ทำขั้นตอนก่อนหน้าซ้ำเพื่อกำหนดจุดพักของแคนวาสเพิ่มเติม
  7. รวมหรือแยกการแสดงข้อมูลสำหรับจุดพักของแคนวาสแต่ละจุด ดังนี้
    • คลิกขวาจุดพักของแคนวาสที่คุณต้องการจัดการ (จุดพักของแคนวาสและมาร์คเกอร์) แล้วคลิก จัดการจุดพัก
      ใช้ไดอะล็อก 'จัดการจุดพัก' เพื่อรวมหรือแยกการแสดงข้อมูลออกจากจุดพักของแคนวาสนี้

    • คลิกการแสดงข้อมูลจากลิสต์เพื่อแยกหรือรวมแคนวาสสำหรับจุดพักของแคนวาสนี้ แล้วคลิก ตกลง
      ใช้ไดอะล็อก 'จัดการจุดพัก' เพื่อรวมหรือแยกการแสดงข้อมูลและฟิลเตอร์แผงข้อมูลออกจากแคนวาสสำหรับจุดพักนี้

  8. ทางเลือก: สร้างการแสดงข้อมูลและเพิ่มในจุดพัก โดยเลือกข้อมูลจากช่องข้อมูล และเพิ่มในแคนวาส
    การแสดงข้อมูลใหม่ได้รับการเพิ่มให้กับจุดพักปัจจุบันเท่านั้น อย่างไรก็ตาม คุณสามารถเพิ่มการแสดงข้อมูลในจุดพักอื่นๆ บนแคนวาสได้ โดยเลือกการแสดงข้อมูลจากลิสต์ในไดอะล็อก 'จัดการจุดพัก' ของจุดพักดังกล่าว
  9. ทางเลือก: ปรับการแสดงข้อมูลให้เหมาะสมสำหรับจุดพักของแคนวาส
    คุณอาจต้องการปรับเนื้อหาให้เหมาะสมสำหรับการแสดงผลบนอุปกรณ์ที่เล็กกว่า เช่น อุปกรณ์มือถือ
    • จัดเรียงการแสดงข้อมูลใหม่ - คลิกและลากการแสดงข้อมูลไปยังตำแหน่งใหม่
    • ปรับการแสดงข้อมูลให้เหมาะสม - ใช้ช่องคุณสมบัติเพื่อซ่อนเนื้อหาที่ไม่จําเป็น เช่น ชื่อหรือคําอธิบาย
    เมื่อคุณปรับการแสดงข้อมูลให้เหมาะสมสำหรับจุดพักหนึ่ง การเปลี่ยนแปลงเหล่านั้นจะไม่มีผลใช้กับจุดพักอื่นในแคนวาส
  10. คลิก บันทึก