การออกแบบเว็บที่ตอบสนองตามอุปกรณ์นั้นตอบสนองต่อโทรศัพท์มือถือในหลายๆ รูปแบบ ก่อนที่จะมีสมาร์ทโฟนปรากฏ มีเพียงไม่กี่คนเท่านั้นที่พิจารณาอย่างจริงจังว่าเว็บไซต์จะมีลักษณะอย่างไรบนอุปกรณ์พกพา สิ่งนี้ได้เปลี่ยนแปลงไปตามกระแสความนิยมของโทรศัพท์มือถือที่มีเว็บเบราว์เซอร์ในตัว
การออกแบบเว็บที่ตอบสนองตามอุปกรณ์ช่วยกระตุ้นกรอบความคิดที่ตั้งคำถามในสมมติฐาน ก่อนหน้านี้ การสันนิษฐานว่าเว็บไซต์จะดูได้เฉพาะบนคอมพิวเตอร์เดสก์ท็อปเท่านั้น แต่ในแนวทางปฏิบัติมาตรฐานในการออกแบบเว็บไซต์เดียวกันนั้นสำหรับโทรศัพท์และแท็บเล็ตด้วย อันที่จริงตอนนี้การใช้อุปกรณ์เคลื่อนที่ทำให้การใช้งานเดสก์ท็อปลดลงบนเว็บแล้ว
แนวคิดที่ปรับเปลี่ยนตามอุปกรณ์นี้จะเป็นประโยชน์ต่อคุณในอนาคต เป็นไปได้อย่างยิ่งที่เว็บไซต์จะมีผู้เข้าชมบนอุปกรณ์และหน้าจอที่เราคาดไม่ถึงในปัจจุบัน และแนวคิดนี้ขยายขอบเขตออกไปนอกหน้าจอด้วย แม้ในปัจจุบันผู้คนจะใช้อุปกรณ์ที่ไม่มีหน้าจอเพื่อเข้าถึงเนื้อหาของคุณ ผู้ช่วยแบบเสียงจะใช้เว็บไซต์ของคุณได้หากคุณใช้พื้นฐานที่แข็งแกร่งของ 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;
}
}
ให้มองว่าหน้าจอคู่เป็นโอกาส อาจใช้หน้าจอหนึ่งเพื่อแสดงเนื้อหาข้อความที่เลื่อนได้ ขณะที่อีกหน้าจอหนึ่งแสดงองค์ประกอบแบบคงที่ เช่น รูปภาพหรือแผนที่
อนาคต
จอแสดงผลแบบพับได้จะกลายมาเป็นสิ่งที่ยิ่งใหญ่ในอนาคตไหม ใครจะไปรู้ ไม่มีใครคาดได้ว่าอุปกรณ์เคลื่อนที่จะเป็นที่นิยมเพียงใด คุณจึงควรเปิดใจเกี่ยวกับรูปแบบของอุปกรณ์ในอนาคตอย่างเคร่งครัด
เหนือสิ่งอื่นใด คุณควรตรวจสอบว่าเว็บไซต์ของคุณสามารถตอบสนองต่อสิ่งต่างๆ ที่จะเกิดขึ้นในอนาคตได้ การออกแบบที่ตอบสนองตามอุปกรณ์คือสิ่งที่มอบให้คุณ ไม่ใช่แค่ชุดเทคนิคที่ใช้ได้จริง แต่ยังมีแนวคิดที่จะตอบสนองคุณได้ดีในการสร้างเว็บแห่งอนาคต
ตรวจสอบความเข้าใจ
ทดสอบความรู้ของคุณเกี่ยวกับการกำหนดค่าหน้าจอ
คำค้นหาสื่อใดกำหนดเป้าหมายอุปกรณ์แบบพับได้ในโหมดแนวนอนแบบแยก
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1)@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1)@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 2)@media (vertical-viewport-segments: 1) and (horizontal-viewport-segments: 1)ตัวแปรสภาพแวดล้อมคืออะไร เช่น env(safe-area-inset-top)