ตารางทัวร์นาเมนต์โดนบังบนมือถือ

ทำไมเบราว์เซอร์มือถือถึงซ่อนเนื้อหา

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

สำหรับหน้าตารางการแข่งขันโป๊กเกอร์ นี่เป็นปัญหาที่เจอจริง ตารางการแข่งขันคือรายการที่แน่นไปด้วยรายการแข่งขัน เงิน buy-in เวลาเริ่ม และโครงสร้างเกม ถ้าแถบที่อยู่บังส่วนหัว ผู้เล่นอาจไม่เห็นป้ายบอกวันหรือซีรีส์ ถ้ามันบังส่วนท้าย พวกเขาอาจพลาดลิงก์นำทางหรือแถวสุดท้ายของตาราง

กับดักของหน่วย viewport

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

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

CSS สมัยใหม่มีทางเลือกอื่น หน่วย viewport แบบไดนามิกอย่าง dvh และหน่วย viewport แบบเล็กอย่าง svh ถูกออกแบบมาให้ตามการเปลี่ยนแปลงของ viewport การใช้ min-height: 100dvh แทน height: 100vh เป็นวิธีแก้แบบมาตรฐานสำหรับเลย์เอาต์เต็มหน้าจอ

Safe-Area Insets

อีกปัจจัยหนึ่งคือ safe area ของอุปกรณ์ มือถือหลายรุ่นมีมุมโค้ง รอยบาก (notch) หรือแถบ home indicator ด้านล่าง เนื้อหาที่วางชิดขอบเกินไปอาจถูกตัดหรือแตะยาก

ตัวแปร environment ของ CSS อย่าง env(safe-area-inset-top), env(safe-area-inset-bottom) และคู่ซ้ายขวาของมัน ช่วยให้เลย์เอาต์กันพื้นที่สำหรับบริเวณเหล่านี้ได้ การเพิ่ม padding ตามค่าเหล่านี้จะช่วยให้ปุ่มควบคุมสำคัญอยู่ภายในพื้นที่ที่ใช้งานได้

สำหรับตารางการแข่งขันโป๊กเกอร์ สิ่งนี้สำคัญที่สุดกับ header แบบติดหนึบ แถบนำทางด้านล่าง และ ปุ่ม ใดก็ตามที่ใช้เลื่อนไปวันหรือหน้าถัดไป

เช็กลิสต์ภาคปฏิบัติสำหรับหน้าตารางการแข่งขัน

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

ทำไมเรื่องนี้ถึงสำคัญกับคนเล่นโป๊กเกอร์

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

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