Viewport Meta Tag คืออะไร ? + สอนวิธีใช้

สำหรับใครที่ทำ responsive web อยู่ คงจะคุ้นเคยกับ viewport meta tag เป็นอย่างดี แต่หลายๆ คนอาจจะต้องแปลกใจ เมื่อได้รู้ว่าสิ่งนี้นั้นไม่ได้เป็นมาตรฐาน

Viewport คืออะไร ?

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 Meta Tag ?

โดยทั่วไปแล้ว 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 นี้

Viewport Meta Tag ใช้อย่างไร ?

เราจะใช้ viewport meta tag เข้ามาช่วย หากหน้าเว็บของเรานั้น ยังไม่ “พอดี” กับ viewport สมมติเราทำหน้าเว็บมาขนาด 640px เมื่อลองเปิดดูด้วย iPhone เราจะพบว่ามันแสดงผลไม่เต็มหน้าจอ เพราะ viewport แบบ default นั้นมีขนาดกว้างกว่า คือ 980px

ให้เราแก้ปัญหาโดยการใส่ viewport meta tag ตามด้านล่างนี้

<meta name="viewport" content="width=640">

เพียงเท่านี้ หน้าเว็บของเราก็จะแสดงผลเต็มจอของ iPhone แล้ว แต่ถ้าเว็บเราเป็นแบบ responsive คือกำหนดความกว้างโดยใช้ % แทนการกำหนดความกว้างแบบตายตัว หากเราไม่มีการกำหนด viewport meta tag เอาไว้เลย เมื่อเราลองไปเปิดด้วย iPhone หน้าตาของเว็บเราอาจไม่เป็นที่น่าพอใจนัก

ที่เป็นเช่นนี้เพราะ default viewport ของ Safari บน iOS นั้นเป็น 980px ซึ่งคงจะไม่เข้าเคสที่เราตั้งใจเอาไว้ หากเราจะแก้ปัญหาโดยการเปลี่ยนค่าของ viewport มาเป็น 320px ก็ยังไม่ใช่วิธีที่ดีนัก เพราะแต่ละ devices นั้น ก็มีขนาดของหน้าจอที่แตกต่างกันออกไป การกำหนด width ด้วยวิธี absolute จึงไม่ได้แก้ปัญหาที่แท้จริง ให้เราหันมากำหนด width โดยใช้ device-width แทน

device-width นั้นมีไว้สำหรับการออกแบบ application โดยเฉพาะ โดยค่าของมันจะขึ้นอยู่กับ “ขนาด” ของ device นั้นๆ (device-width ของ iPhone3, 4 5 จะอยู่ที่ 320px) การกำหนด width ให้มีค่าเท่ากับ device-width จึงช่วยให้การแสดงผลหน้าเว็บดูสมเหตุสมผลมากขึ้น ให้เราลองกำหนด viewport meta tag แบบนี้

<meta name="viewport" content="width=device-width">

มีเรื่องแปลกอยู่อย่างหนึ่งก็คือ device-with ของ iPhone ในแนว portrait กับ landscape นั้นเท่ากัน พูดง่ายๆ ก็คือ ในแนวตั้งมันจะมีขนาด 320px พอมาเป็นแนวนอน แทนที่มันจะเปลี่ยนมาเป็น 480px แต่มันกลับยังเป็น 320px อยู่ ซึ่งต่างจาก android phones

ด้วยเหตุนี้เอง เวลาเราตะแคง iPhone เราจะพบว่าหน้าเว็บเรายังคงมีหน้าตาเหมือนเดิม แต่จะมี scale ที่ใหญ่ขึ้น เนื่องจาก Safari จะไป zoom มันให้พอดีกับ viewport นั่นเอง

หากเราไม่ต้องการให้มัน zoom ให้เราใส่ viewport meta tag ตามด้านล่างนี้

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

การกำหนด viewport meta tag แบบนี้ จะเป็นการบอก Safari ว่าไม่ต้องไป zoom หน้าเว็บนะ ไม่ว่าจะกรณีใดๆ ก็ตาม เมื่อเราลองพรีวิวใน iPhone ดูอีกที เราจะพบว่าหน้าเว็บสามารถแสดงเนื้อหาได้มากขึ้น เนื่องจากมีพื้นที่แสดงผลเพิ่มขึ้นจาก 320px มาเป็น 480px นั่นเอง นอกจากนี้ การกำหนด default scale ให้เป็น 1 เท่า จะถือเป็นการกำหนดให้ใช้ width เท่ากับ device-width โดยอัตโนมัติ

ในบางกรณี เราอาจต้องการจำกัดการ zoom ของ users ไม่ให้มากหรือน้อยจนเกินไป เราสามารถทำได้โดยการกำหนด minimum-scale และ maximum-scale

<meta name="viewport" content="minimum-scale=0.5, maximum-scale=2">

แต่หากเราไม่ต้องการให้ users สามารถ zoom หน้าเว็บได้เลย ให้เรากำหนด user-scalable ให้มีค่าเป็น no

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

อย่างไรก็ตาม การเข้าไปจำกัดการ zoom ของ users ถือเป็นสิ่งที่ไม่สมควรเท่าไรนัก เนื่องจากผิดหลัก accessibility

Viewport Meta Tag ไม่ใช่มาตรฐาน

อย่าลืมว่า viewport meta tag นั้นถูกคิดค้นโดย Apple นั่นหมายความว่า มันไม่ได้เป็นมาตรฐานแต่อย่างใด และที่สำคัญก็คือ สิ่งนี้มีไว้ใช้เพื่อปรับแต่งการแสดงผล ซึ่งมันไม่ควรจะอยู่ในรูปแบบ html แต่ควรจะเป็น css มากกว่า ด้วยเหตุนี้เอง W3C จึงได้สร้าง “CSS Device Adaptation” ขึ้นมา โดยมันจะทำหน้าที่เหมือนกับ viewport meta tag แต่จะอยู่ในรูปแบบ css แทน สามารถอ่านรายละเอียดเพิ่มเติมได้ที่บทความ “@viewport CSS Rule คืออะไร ? + สอนวิธีใช้”