Frontend Academy · บทเรียน

เมตาแท็ก viewport

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

เมตาแท็ก viewport เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงต้องใช้เมตาแท็กพื้นที่แสดงผล

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

แท็ก

เพิ่มแท็กนี้ไว้ภายใน <head> ของทุกหน้า แท็กนี้จำเป็นต่อการทำให้การออกแบบที่ตอบสนองทำงานได้อย่างถูกต้อง

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width

width=device-width จะกำหนดความกว้างของพื้นที่แสดงผลให้เท่ากับความกว้างหน้าจอของอุปกรณ์ในหน่วยพิกเซล CSS บน iPhone 14 ที่กว้าง 390px จะทำให้พื้นที่แสดงผลกว้าง 390px ไม่ใช่ 980px

initial-scale=1.0

initial-scale=1.0 จะกำหนดระดับการซูมเป็น 1 เมื่อโหลดหน้าเว็บครั้งแรก หากไม่มีค่านี้ เบราว์เซอร์บางตัวอาจยังใช้ตัวคูณการซูมอยู่ เมื่อใช้ร่วมกับ device-width ค่านี้จะทำให้อัตราส่วนพิกเซล CSS ต่อพิกเซลของอุปกรณ์เป็น 1:1 อย่างแท้จริง

พิกเซล CSS กับพิกเซลจริง

หน้าจอความละเอียดสูง (Retina) มีอัตราส่วนพิกเซลของอุปกรณ์ (device pixel ratio (DPR)) มากกว่า 1 iPhone 14 ที่กว้าง 390px มีพิกเซลจริง 1170 พิกเซล (DPR = 3) พิกเซล CSS เป็นนามธรรมที่ครอบคลุมพิกเซลจริง ดังนั้น CSS ของคุณจึงยังทำงานด้วยพิกเซล CSS ได้ไม่ว่า DPR จะเป็นเท่าใด

อย่าใช้ user-scalable=no

นักพัฒนาบางรายเพิ่ม user-scalable=no เพื่อปิดการซูมด้วยการบีบนิ้ว ไม่ควรทำเช่นนั้น เพราะจะป้องกันไม่ให้ผู้ใช้ที่มีความบกพร่องทางการมองเห็นซูมเพื่ออ่านเนื้อหา และไม่ผ่านเกณฑ์ความสำเร็จ 1.4.4 ของ WCAG

หน่วยพื้นที่แสดงผล: vw และ vh

1vw = 1% ของความกว้างพื้นที่แสดงผล 1vh = 1% ของความสูงพื้นที่แสดงผล 100vw และ 100vh จะเต็มพื้นที่แสดงผลทั้งหมด ใช้หน่วยเหล่านี้กับส่วน hero และเค้าโครงแบบเต็มหน้าจอ

.hero {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

dvh — ความสูงพื้นที่แสดงผลแบบไดนามิก

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

.full-screen {
  min-height: 100vh;    /* fallback */
  min-height: 100dvh;   /* modern browsers */
}

พื้นที่แสดงผลใน DevTools

ใน Chrome DevTools ให้คลิกไอคอนอุปกรณ์เพื่อเข้าสู่โหมดอุปกรณ์ และดูได้อย่างละเอียดว่าหน้าเว็บของคุณมีลักษณะอย่างไรในพื้นที่แสดงผลขนาดต่างๆ ไม้บรรทัดจะแสดงพิกเซล CSS

รูปแบบของแอตทริบิวต์ content

คุณยังสามารถกำหนด initial-scale, minimum-scale และ maximum-scale ได้ ควรใช้ค่าที่เหมาะสม การกำหนด minimum-scale=1 โดยไม่ใช้ user-scalable=no ยังคงอนุญาตให้ซูมได้ ซึ่งเป็นแนวทางที่เข้าถึงได้

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

พื้นที่แสดงผลและมีเดียคิวรี

มีเดียคิวรีใช้ความกว้างพื้นที่แสดงผล (ค่าพิกเซล CSS ไม่ใช่พิกเซลจริง) หากพื้นที่แสดงผลของคุณกว้าง 390px @media (max-width: 768px) จะตรงตามเงื่อนไข เมตาแท็ก viewport ทำให้จุดแบ่งเหล่านี้ทำงานได้อย่างถูกต้องบนอุปกรณ์เคลื่อนที่

ตรวจสอบความเข้าใจ

width=device-width ในเมตาแท็ก viewport มีจุดประสงค์ใด

สรุป: เมตาแท็กพื้นที่แสดงผล

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

คำถามที่พบบ่อย

บทเรียน “เมตาแท็ก viewport” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เมตาแท็ก viewport” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เมตาแท็ก viewport”

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

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “เมตาแท็ก viewport” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Frontend Academy