การกำหนดค่าหน้าจอ

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

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

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

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

Dual Screen

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

กลุ่มวิวพอร์ต

มีฟีเจอร์สื่อเวอร์ชันทดลองที่ออกแบบมาเพื่อตรวจสอบว่าเว็บไซต์ของคุณกำลังแสดงบนอุปกรณ์แบบ 2 หน้าจอหรือไม่ ชื่อที่เสนอของฟีเจอร์สื่อคือ viewport-segments มี 2 แบบ ได้แก่ horizontal-viewport-segments และ vertical-viewport-segments

หากฟีเจอร์สื่อของ horizontal-viewport-segments รายงานค่า 2 และ vertical-viewport-segments รายงานค่า 1 ซึ่งหมายความว่าบานพับในอุปกรณ์จะทำงานจากบนลงล่าง โดยจะแบ่งเนื้อหาออกเป็น 2 แผงที่เคียงข้างกัน

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  // Styles for side-by-side screens.
}

หากฟีเจอร์สื่อของ vertical-viewport-segments รายงานค่า 2 และ horizontal-viewport-segments รายงานค่า 1 บานพับจะทำงานจากด้านหนึ่งไปอีกด้านหนึ่ง โดยจะแบ่งเนื้อหาออกเป็น 2 แผง โดยให้แผงหนึ่งอยู่ด้านบน

@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
  // Styles for stacked screens.
}

หากทั้ง vertical-viewport-segments และ horizontal-viewport-segments รายงานค่า 1 หมายความว่าเว็บไซต์แสดงบนหน้าจอเพียงหน้าจอเดียว แม้ว่าอุปกรณ์จะมีมากกว่า 1 หน้าจอก็ตาม ซึ่งเทียบเท่ากับการไม่ใช้คิวรี่สื่อใดๆ

ตัวแปรสภาพแวดล้อม

แต่ฟีเจอร์สื่อของ viewport-segments เองก็ไม่ได้ช่วยให้คุณออกแบบบานพับที่สร้างความรำคาญได้ คุณต้องมีวิธีดูขนาดของบานพับ และนั่นคือส่วนที่ตัวแปรสภาพแวดล้อมช่วยได้

ตัวแปรสภาพแวดล้อมใน CSS ช่วยให้คุณพิจารณาการรบกวนอุปกรณ์ที่ผิดปกติในสไตล์ของคุณได้ ตัวอย่างเช่น คุณสามารถออกแบบรอบๆ "รอยบาก" บน iPhone X โดยใช้ค่าสภาพแวดล้อม safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom และ safe-area-inset-left คีย์เวิร์ดเหล่านี้จะรวมอยู่ในฟังก์ชัน env()

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

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

body {
  padding-top: env(safe-area-inset-top, 1em);
  padding-right: env(safe-area-inset-right, 1em);
  padding-bottom: env(safe-area-inset-bottom, 1em);
  padding-left: env(safe-area-inset-left, 1em);
}

เพื่อให้ตัวแปรสภาพแวดล้อมเหล่านั้นทำงานใน iPhone X ได้ ให้อัปเดตองค์ประกอบ meta ที่ระบุข้อมูล viewport ดังนี้

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

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

สำหรับหน้าจอแบบพับได้ ระบบจะเสนอตัวแปรสภาพแวดล้อมใหม่ 6 รายการ ได้แก่ viewport-segment-width, viewport-segment-height, viewport-segment-top, viewport-segment-left, viewport-segment-bottom, viewport-segment-right

ต่อไปนี้เป็นตัวอย่างของการออกแบบที่มี 2 คอลัมน์ โดยคอลัมน์หนึ่งกว้างกว่าอีกคอลัมน์

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }
  main article {
    flex: 2;
  }
  main aside {
    flex: 1;
  }
}

สำหรับหน้าจอคู่ที่มีบานพับแนวตั้ง ให้ตั้งค่าคอลัมน์แรกให้มีความกว้างของหน้าจอแรกและคอลัมน์ที่ 2 เป็นความกว้างของหน้าจอที่ 2

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  main article {
    flex: 1 1 env(viewport-segment-width 0 0);
  }
  main aside {
    flex: 1;
  }
}

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

วันที่

อนาคต

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

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

ตรวจสอบความเข้าใจ

ทดสอบความรู้ของคุณเกี่ยวกับการกำหนดค่าหน้าจอ