เครื่องมือทดสอบขนาด Viewport และ Responsive Breakpoint

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

เครื่องมือนี้จะอ่านค่า window.innerWidth และ window.innerHeight ทุกครั้งที่มีการปรับขนาดหรือเปลี่ยนทิศทางการวางหน้าจอ พร้อมกับ layout viewport จาก documentElement.clientWidth/clientHeight ค่า device pixel ratio และทิศทางการวางหน้าจอของคุณ breakpoint คือความกว้างของ viewport ที่ทำให้เค้าโครงเปลี่ยนแปลง เช่น คอลัมน์ซ้อนกัน เมนูยุบ ขนาดตัวอักษรเปลี่ยนไป และเฟรมเวิร์กอย่าง Tailwind CSS จะใช้สไตล์จากชุดความกว้างที่มีชื่อไล่ขึ้นไป ตารางอ้างอิงด้านล่างจะไฮไลต์ช่วงที่ความกว้างของคุณตกอยู่ ส่วนแผงทดสอบที่ลากปรับขนาดได้จะรายงาน breakpoint ที่ความกว้างของตัวมันเองตรงกับ ทำให้คุณดูตัวอย่างคอมโพเนนต์ได้โดยไม่ต้องปรับขนาดทั้งหน้าต่าง ทุกอย่างทำงานในเครื่องของคุณเอง ไม่มีการอัปโหลดข้อมูลใดๆ

หากตัวเลขดูผิดปกติ แสดงว่ามีหลายปัจจัยที่อยู่ระหว่างความละเอียดของแผงจอกับ viewport ที่หน้าเว็บมองเห็น แถบเครื่องมือและแถบเลื่อนของเบราว์เซอร์จะกินพื้นที่ใช้งานได้ไปบางส่วน และการซูมหน้าเว็บจะลดจำนวน CSS พิกเซลลง ทำให้ innerWidth ลดลงโดยที่หน้าต่างไม่ได้ขยับ เช่นเดียวกับการปรับสเกลการแสดงผลของระบบปฏิบัติการ ซึ่งเป็นเหตุผลว่าทำไมจอภาพที่เหมือนกันสองจอจึงอาจรายงานขนาดต่างกันได้ บนโทรศัพท์ แท็ก meta viewport อย่าง <meta name="viewport" content="width=device-width, initial-scale=1"> จะจัดวางหน้าเว็บตามความกว้างของอุปกรณ์ แทนที่จะจำลองเป็นเดสก์ท็อปกว้าง ~980px ดังนั้น viewport ขนาด 390 พิกเซลที่ DPR 3 จึงอยู่บนแผงจอที่มีความกว้างจริงประมาณ 1170 พิกเซลทางกายภาพ หากต้องการดูความละเอียดทางกายภาพและความหนาแน่นของพิกเซลทั้งหมดของหน้าจอ ให้ใช้เครื่องมือ What Is My Screen Size และ Screen Resolution Test

Responsive Breakpoint ที่พบทั่วไป