การออกแบบเว็บที่ตอบสนองตามอุปกรณ์คือปฏิกิริยาที่มีต่อโทรศัพท์มือถือในหลายๆ ด้าน ก่อนที่สมาร์ทโฟนจะปรากฎขึ้น ผู้คนจำนวนน้อยมากที่พิจารณาอย่างจริงจังว่าเว็บไซต์ควรมีรูปลักษณ์และความรู้สึกอย่างไรในอุปกรณ์เคลื่อนที่ ซึ่งเปลี่ยนแปลงไปตามการเพิ่มขึ้นของอุตุนิยมวิทยาของโทรศัพท์มือถือที่มีเว็บเบราว์เซอร์ในตัว
การออกแบบเว็บที่ตอบสนองตามอุปกรณ์ช่วยส่งเสริมแนวคิดที่ตั้งคำถามกับการสันนิษฐาน จากที่ก่อนหน้านี้เรามักคิดว่าเว็บไซต์จะดูได้บนคอมพิวเตอร์เดสก์ท็อปเท่านั้น แต่ตอนนี้แนวทางปฏิบัติมาตรฐานในการออกแบบเว็บไซต์เดียวกันนี้สำหรับโทรศัพท์และแท็บเล็ตด้วย อันที่จริงปัจจุบันได้ลดการใช้อุปกรณ์เคลื่อนที่ลงบนเว็บแล้ว
แนวคิดที่ปรับเปลี่ยนตามอุปกรณ์นี้จะตอบสนองคุณได้ดีในอนาคต เป็นไปได้อย่างยิ่งที่เว็บไซต์ของคุณจะได้รับการดูบนอุปกรณ์และหน้าจอที่เราไม่สามารถจินตนาการได้ในปัจจุบัน แนวคิดนี้พัฒนาไปไกลกว่าหน้าจอ แม้แต่ตอนนี้ผู้คนก็ใช้อุปกรณ์ที่ไม่มีหน้าจอเพื่อเข้าถึงเนื้อหาของคุณ ผู้ช่วยแบบเสียงสามารถใช้เว็บไซต์ของคุณได้หากคุณใช้รากฐานที่มั่นคงสำหรับ HTML ที่มีความหมาย
โลกของหน้าจอก็มีการทดลองเช่นกัน ทุกวันนี้มีอุปกรณ์ต่างๆ มากมายที่มีหน้าจอแบบพับได้ ซึ่งจะนำมาซึ่งความท้าทายบางอย่างสำหรับการออกแบบของคุณ
Dual Screen
ผู้ใช้อุปกรณ์แบบพับได้สามารถเลือกได้ว่าต้องการให้เว็บเบราว์เซอร์ใช้พื้นที่เพียงหน้าจอใดหน้าจอหนึ่งหรือครอบคลุมทั้ง 2 หน้าจอ หากเบราว์เซอร์ครอบคลุมทั้ง 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);
}
อัปเดตองค์ประกอบ meta ที่ระบุข้อมูล viewport เพื่อให้ตัวแปรสภาพแวดล้อมดังกล่าวทำงานใน iPhone X ได้
<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;
}
}
สำหรับ Dual Screen ที่มีบานพับแนวตั้ง ให้ตั้งค่าคอลัมน์แรกเป็นความกว้างของหน้าจอแรก และคอลัมน์ที่ 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;
}
}
ถือว่า Dual Screen เป็นโอกาส บางทีอาจใช้หน้าจอหนึ่งเพื่อแสดงเนื้อหาข้อความแบบเลื่อนได้ ขณะที่อีกหน้าจอหนึ่งแสดงองค์ประกอบคงที่ เช่น รูปภาพหรือแผนที่
อนาคต
จอแสดงผลแบบพับได้จะกลายเป็นเรื่องที่ได้รับความนิยมอย่างมากในอนาคตหรือไม่ ใครจะไปรู้ ไม่มีใครคาดคิดว่าอุปกรณ์เคลื่อนที่ได้รับความนิยมได้ขนาดไหน ดังนั้นจึงควรเปิดใจเกี่ยวกับรูปแบบของอุปกรณ์ในอนาคต
เหนือสิ่งอื่นใด เป็นสิ่งคุ้มค่าที่จะตรวจสอบว่าเว็บไซต์ของคุณสามารถตอบสนองต่อสิ่งใดก็ตามที่อาจเกิดขึ้นในอนาคต นี่คือการออกแบบที่ตอบสนองตามอุปกรณ์ ไม่ใช่แค่ชุดเทคนิคที่นำไปใช้ได้จริง แต่ยังเป็นแนวความคิดที่จะตอบสนองคุณเช่นเดียวกับการสร้างเว็บแห่งอนาคต
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับการกำหนดค่าหน้าจอ
คำค้นหาสื่อใดกำหนดเป้าหมายอุปกรณ์พับได้ในโหมดแนวนอนแยก
@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)