สำนักวิทยบริการและเทคโนโลยีสารสนเทศ (สวส.)

Office of Academic Resources and Information Technology

ปรับหน้าเว็บเพจให้พอดีหน้าจอ iPhone ด้วย Viewport Meta Tag

viewport ก็คือ “visible area” หรือ “ส่วนที่เรามองเห็นได้” ของหน้าเว็บนั่นเอง สำหรับ desktop แล้ว เราสามารถปรับขนาดของ viewport ได้โดยการ resize หน้าต่างของ web browser ถ้าหากหน้าเว็บนั้นมีขนาดใหญ่กว่า viewport เราก็จะพบ scroll bar ซึ่งจะมีไว้สำหรับเลื่อนไปดูหน้าเว็บในส่วนที่ล้นออกไปนอก viewport ได้

แต่ viewport สำหรับ Safari ใน iOS แล้ว จะต่างจากใน desktop เล็กน้อย ตรงที่ viewport จะหมายถึงพื้นที่ทั้งหมดที่ใช้ในการแสดงเนื้อหาของหน้าเว็บ ซึ่งมันจะสามารถใหญ่กว่าหรือเล็กกว่า “visible area” (ในที่นี้คือหน้าจอของ mobile) ก็ได้ สาเหตุที่ viewport สำหรับ Safari ใน iOS เป็นแบบนี้ก็เพราะว่า users นั้น สามารถใช้นิ้วเพื่อ zoom หน้าเว็บได้ เราจะเห็นว่าการ zoom นี้ ถือเป็นการเปลี่ยน scale ของหน้าเว็บ ไม่ใช่การเปลี่ยน size นิยามของ viewport ที่เคยหมายถึง visible area จึงใช้ไม่ได้อีกต่อไป

โดยทั่วไปแล้ว viewport สำหรับ Safari ใน iOS นั้น จะถูกกำหนดไว้ที่ 980px นั่นหมายความว่าเวลาเราดูเว็บใดเว็บหนึ่งด้วย iPhone มันก็จะแสดงผลเหมือนกับการเปิดเว็บนั้นด้วย web browser บน desktop ที่มี viewport ขนาด 980px แต่ Safari ใน iPhone ก็จะลด scale ของหน้าเว็บนั้นลงมาเพื่อให้สามารถแสดงผลในหน้าจอของ iPhone ได้ อย่างไรก็ตาม การลด scale ลงมานี้ อาจไปทำให้ตัวอักษรที่แสดงผลออกมามีขนาดเล็กเกินไปจนอ่านได้ลำบาก

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

ด้วยเหตุนี้เอง Apple จึงได้คิดค้น “Viewport Meta Tag” ขึ้นมา เพื่อให้เราสามารถเปลี่ยนค่า default settings ของ viewport ได้ ค่า default settings นี้ ไม่ได้มีแค่ width ของ viewport เพียงอย่างเดียว แต่จะรวมไปถึง height และ scale ของ viewport ด้วย หลังจากที่ Safari รองรับ viewport meta tag ได้ไม่นาน web browsers อื่นๆ ต่างก็พากันรองรับ viewport meta tag นี้