บทความนี้ส่วนใหญ่แนะนำแท็ก Viewport และการวิเคราะห์การใช้งาน CSS ที่เกี่ยวข้องในการพัฒนามือถือ HTML5 Viewport มักเรียกว่า Viewport หรือ Viewport และมีบทบาทสำคัญในการจัดวางรูปแบบมือถือและการปรับหน้าจอ เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้
Viewport (Viewport) ที่กล่าวถึงในส่วนหน้ามือถือเป็นพื้นที่หน้าจอที่เบราว์เซอร์แสดงเนื้อหาหน้า แนวคิดที่สำคัญหลายประการที่เกี่ยวข้องคือความสัมพันธ์ระหว่าง DIP (พิกเซลอุปกรณ์พิกเซลที่ไม่ขึ้นกับอุปกรณ์) และพิกเซล CSS ที่นี่เราเข้าใจแนวคิดต่อไปนี้ก่อน
Viewport เค้าโครงโดยทั่วไปแล้วเบราว์เซอร์บนอุปกรณ์มือถือจะตั้งค่าแท็ก Meta Viewport โดยค่าเริ่มต้นโดยกำหนด viewport เค้าโครงเสมือนจริงเพื่อแก้ปัญหาการแสดงหน้าแรกบนโทรศัพท์มือถือ iOS และ Android ตั้งค่าความละเอียดของ Viewport นี้เป็น 980px ดังนั้นหน้าเว็บบนพีซีสามารถนำเสนอบนโทรศัพท์ได้ แต่องค์ประกอบนั้นดูเล็กมากและโดยทั่วไปแล้วหน้าเว็บสามารถปรับขนาดได้ด้วยตนเองโดยค่าเริ่มต้น
Visual Viewport และพิกเซลทางกายภาพVisual Viewport (Visual Viewport) ให้พื้นที่ภาพของหน้าจอทางกายภาพพิกเซลทางกายภาพของหน้าจอจอแสดงผลขนาดเท่าหน้าจออุปกรณ์ที่มีความหนาแน่นพิกเซลสูงและพิกเซลฮาร์ดแวร์จะมากขึ้น ตัวอย่างเช่นพิกเซลทางกายภาพของ iPhone:
iphone5: 640 * 1136
iPhone 6: 750 * 1334
iPhone6 Plus: 1242 * 2208
มุมมองที่ดีที่สุดในการชมวิวพอร์ตและจุ่ม (พิกเซลลอจิกของอุปกรณ์)
มุมมองในอุดมคติมักจะเป็นสิ่งที่เราเรียกความละเอียดหน้าจอ
DIP (พิกเซลลอจิกของอุปกรณ์) ไม่มีส่วนเกี่ยวข้องกับพิกเซลฮาร์ดแวร์ของอุปกรณ์ การจุ่มใช้พื้นที่เดียวกันบนหน้าจออุปกรณ์ของความหนาแน่นพิกเซลใด ๆ
ตัวอย่างเช่นพิกเซลฮาร์ดแวร์ของจอแสดงผลหน้าจอเรตินาของ MacBook Pro คือ: 2880 * 1800 เมื่อคุณตั้งค่าความละเอียดหน้าจอเป็น 1920 * 1200 ค่าความกว้างของ Viewport ในอุดมคติคือ 1920 พิกเซลและค่าความกว้างของ DIP คือ 1920 ความสัมพันธ์ระหว่างความกว้างของพิกเซลเชิงตรรกะและความกว้างพิกเซลทางกายภาพ (ความละเอียดพิกเซล) ของอุปกรณ์เป็นไปตามสูตรต่อไปนี้:
ความกว้างพิกเซลเชิงตรรกะ *กำลังขยาย = ความกว้างพิกเซลทางกายภาพความละเอียดของหน้าจอโทรศัพท์มือถือมักไม่อนุญาต โดยทั่วไปจะเป็นค่าคงที่ที่กำหนดโดยผู้ผลิตอุปกรณ์โดยค่าเริ่มต้น กล่าวอีกนัยหนึ่งค่าของการจุ่มคือค่าของ Viewport ในอุดมคติ (เช่นความละเอียด) ตัวอย่างเช่นความละเอียดหน้าจอของ iPhone:
iphone5: ความละเอียด 320*568, พิกเซลทางกายภาพ 640*1136, @2x
iPhone6: ความละเอียด 375*667, พิกเซลทางกายภาพ 750*1334, @2x
iPhone6 Plus: ความละเอียด 414 * 736, พิกเซลทางกายภาพ 1242 * 2208, @3x, (โปรดทราบว่าอัตราส่วนภาพที่แสดงจริงจะลดลงเหลือ 1080 × 1920 เหตุผลเฉพาะจะถูกนำมาใช้ในตอนท้ายของบทความของเรา)
CSS Pixelsหน่วย CSS Pixels (PX) ที่ใช้สำหรับเค้าโครงหน้า ขนาดพิกเซลของสไตล์ (ตัวอย่างเช่นความกว้าง: 100px) ถูกระบุใน CSS Pixels อัตราส่วนของพิกเซล CSS ต่อ DIP คืออัตราส่วนการปรับสเกลของหน้าเว็บ หากเว็บเพจไม่ได้ปรับขนาดดังนั้น CSS Pixel จะสอดคล้องกับ DIP (พิกเซลลอจิกของอุปกรณ์)
ใช้ Viewport Meta Tag เพื่อควบคุมเค้าโครง
ก่อนอื่นมาดูคุณสมบัติสุดขั้วของ Meta Tag Viewport:
CSS รหัสคัดลอกเนื้อหาไปยังคลิปบอร์ด