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

ดูว่าหน้าต่างเบราว์เซอร์ของคุณมีขนาดใหญ่แค่ไหนในมุมมองของหน้าเว็บ เครื่องมือนี้อ่านความกว้างและความสูงของ viewport เป็นหน่วย CSS พิกเซล ค่า device pixel ratio และทิศทางการวางหน้าจอ พร้อมแสดงว่าขนาดปัจจุบันตรงกับ responsive breakpoint ใด — ทั้งหมดนี้แบบเรียลไทม์ ปรับขนาดหน้าต่างแล้วทุกค่าจะอัปเดตทันที

—×—px

ปรับขนาดหน้าต่างเบราว์เซอร์ของคุณแล้วดูค่าเหล่านี้อัปเดตแบบเรียลไทม์

กำลังอ่านค่า viewport…Breakpoint: —

Viewport

—

window.innerWidth × innerHeight (CSS px)

Layout Viewport

—

documentElement client size

Device Pixel Ratio

—

CSS px → physical px

ทิศทางการวางหน้าจอ

—

กว้างกว่าสูง หรือสูงกว่ากว้าง

Tailwind CSS Breakpoints

ช่วงที่ viewport ของคุณตกอยู่จะถูกไฮไลต์ขณะที่คุณปรับขนาด

คำนำหน้า	ความกว้างขั้นต่ำ	ใช้ตั้งแต่
base	0px	0 – 639px
sm	640px	640 – 767px
md	768px	768 – 1023px
lg	1024px	1024 – 1279px
xl	1280px	1280 – 1535px
2xl	1536px	1536px+

หมวดหมู่อุปกรณ์

มือถือ

<640px

แท็บเล็ต

640–1023px

แล็ปท็อป

1024–1439px

เดสก์ท็อป

≥1440px

แผงทดสอบแบบปรับขนาดได้

ลากมุมล่างขวาเพื่อปรับขนาดแผงนี้ มันจะรายงานขนาดของตัวมันเองและ breakpoint ที่ความกว้างนั้นตรงกับ — เป็นตัวชี้วัด responsive แบบรวดเร็ว

ขนาดแผง—Breakpoint ของแผง—

—

ลากมุมล่างขวาของฉัน ↘

ขนาด Viewport ของอุปกรณ์ทั่วไป

ค่าประมาณ viewport เป็น CSS พิกเซลแนวตั้งสำหรับใช้อ้างอิง ค่าจริงจะแตกต่างกันไปตามเบราว์เซอร์และระบบปฏิบัติการ

อุปกรณ์	Viewport (CSS px)	DPR
iPhone SE	375 × 667	2×
iPhone 15 / 14 Pro	393 × 852	3×
Pixel 8	412 × 915	2.6×
iPad mini	768 × 1024	2×
iPad Pro 11"	834 × 1194	2×
Surface Pro	912 × 1368	2×
Laptop (720p)	1280 × 720	1×
Laptop (1080p)	1366 × 768	1×
Desktop (1080p)	1920 × 1080	1×

เครื่องมือที่เกี่ยวข้อง

What Is My Screen Size Screen Resolution Test

Viewport คืออะไร

Viewport คือพื้นที่ที่มองเห็นได้ซึ่งหน้าเว็บสามารถวาดเนื้อหาลงไปได้ นั่นคือพื้นที่เนื้อหาของหน้าต่างเบราว์เซอร์ ไม่นับรวมแท็บ แถบที่อยู่ หรือแถบบุ๊กมาร์ก นี่คือเหตุผลที่ viewport มักมีขนาดเล็กกว่าความละเอียดหน้าจอเสมอ เพราะหน้าจอคือแผงทั้งหมด ในขณะที่ viewport เป็นเพียงส่วนที่หน้าเว็บสามารถใช้งานได้ window.innerWidth และ window.innerHeight รายงานพื้นที่นั้นเป็นหน่วย CSS พิกเซล ส่วน documentElement.clientWidth/clientHeight รายงาน layout viewport (พื้นที่เดียวกันแต่หักความกว้างของสกรอลบาร์แบบดั้งเดิมออก หากมีการแสดงอยู่) เนื่องจาก viewport เปลี่ยนแปลงทันทีที่คุณปรับขนาด แบ่งหน้าจอ หรือหมุนอุปกรณ์ มันจึงเป็นค่าที่ responsive layout ตอบสนองจริง ๆ

CSS พิกเซล เทียบกับ device พิกเซล และ devicePixelRatio

CSS พิกเซลเป็นหน่วยของเลย์เอาต์ ไม่ใช่จุดทางกายภาพบนแผงจอ บนจอแสดงผลมาตรฐาน หนึ่ง CSS พิกเซลจะตรงกับหนึ่งพิกเซลทางกายภาพ แต่จอความละเอียดสูงแบบ 'Retina' จะรวมพิกเซลทางกายภาพสองหรือสามจุดไว้ในหนึ่ง CSS พิกเซล เพื่อให้ตัวอักษรดูคมชัดขึ้น window.devicePixelRatio บอกค่าตัวคูณนั้น ค่า 2 หมายความว่า viewport ที่กว้าง 1440 CSS พิกเซล ถูกวาดด้วยพิกเซลทางกายภาพ 2880 จุด เนื่องจากหน้าเว็บถูกจัดวางเป็น CSS พิกเซล โทรศัพท์ที่รายงาน viewport กว้าง 390 พิกเซลพร้อม DPR เท่ากับ 3 จึงมีแผงจอทางกายภาพกว้างประมาณ 1170 พิกเซล หากต้องการดูความละเอียดทางกายภาพและความหนาแน่นพิกเซลเต็มรูปแบบของหน้าจอ ให้ใช้เครื่องมือ What Is My Screen Size และ Screen Resolution Test

Responsive Breakpoint

Breakpoint คือความกว้างของ viewport ที่ทำให้เลย์เอาต์เปลี่ยนแปลง เช่น คอลัมน์เรียงซ้อนกัน เมนูยุบตัวลง หรือขนาดตัวอักษรเปลี่ยน CSS media query และเฟรมเวิร์กยูทิลิตี้อย่าง Tailwind CSS กำหนดชุดความกว้างที่มีชื่อเรียกไว้ล่วงหน้าจำนวนหนึ่ง และใช้สไตล์ตั้งแต่ความกว้างนั้นขึ้นไป ค่าเริ่มต้นของ Tailwind คือ sm ที่ 640px, md ที่ 768px, lg ที่ 1024px, xl ที่ 1280px และ 2xl ที่ 1536px ต่ำกว่า 640px จะอยู่ในช่วง base ที่ไม่มีคำนำหน้า ตารางอ้างอิงด้านล่างจะไฮไลต์ช่วงที่กำลังใช้งานขณะที่คุณปรับขนาด และแผงทดสอบที่ลากปรับขนาดได้จะรายงานว่าความกว้างของตัวมันเองตรงกับ breakpoint ใด — เป็นวิธีที่รวดเร็วในการดูตัวอย่างพฤติกรรมของคอมโพเนนต์ที่ขนาดต่าง ๆ โดยไม่ต้องเปลี่ยนขนาดหน้าต่างทั้งหมด

ทำไม innerWidth จึงแตกต่างจากความกว้างหน้าจอ

มีหลายสิ่งที่อยู่ระหว่างความละเอียดของแผงจอกับ viewport ที่หน้าเว็บมองเห็น เฟรมของเบราว์เซอร์ (แท็บ แถบเครื่องมือ และสกรอลบาร์ที่มองเห็นได้) จะถูกหักออกจากพื้นที่ใช้งานได้ การซูมหน้าเว็บก็เปลี่ยนค่านี้เช่นกัน การซูมเข้าจะลดจำนวน CSS พิกเซลที่พอดีกับพื้นที่นั้น ทำให้ innerWidth ลดลงแม้ว่าหน้าต่างจะไม่ได้ขยับ และยังส่งผลต่อ devicePixelRatio ด้วย บนมือถือ แท็ก meta viewport — <meta name="viewport" content="width=device-width, initial-scale=1"> — จะบอกเบราว์เซอร์ให้ตั้งค่า layout viewport เป็นความกว้างของอุปกรณ์ แทนที่จะแสร้งทำเป็นเดสก์ท็อปขนาดประมาณ 980px นี่คือเหตุผลที่เว็บไซต์แบบ responsive จำเป็นต้องใช้แท็กนี้ การปรับสเกลการแสดงผลของระบบปฏิบัติการก็เปลี่ยนจำนวน CSS พิกเซลเช่นกัน จึงเป็นเหตุผลที่จอมอนิเตอร์เหมือนกันสองจอสามารถรายงานขนาด viewport ต่างกันได้