ไม่ว่าคุณจะมีเว็บถึงแม้อาจจะไม่ Responsive อินเทรนด์อะไรมากมาย แต่อยากให้เว็บมันไม่ต้องย่อเล็กลง เมื่อเข้าดูผ่าน Mobile สาเหตุที่เป็นเช่นนั้น ก็เพราะว่าใน Mobile modern browser ส่วนมากจะปรับขนาดลงเพื่อให้พอดีกับจอมือถือเท่าที่ทำได้
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 นี้
เวลาเปิดขึ้นมา ไม่อยากให้ย่อเท่าขนาดจอ อยากได้ใหญ่กว่านี้ทำอย่างไร
<meta name=”viewport” content=”initial-scale=2.0,width=device-width”/> 2.0 คือ 200% โดย Scale ปกติที่ถูกย่อลงนั่นคือ 1.0(100%)
แล้วถ้าต้องการให้ User ซูมเข้า ซูมออกได้ใน Scale ที่ต้องการหละ?
<meta name=”viewport” content=”width=device-width, maximum-scale=3, minimum-scale=0.5″ /> ซูมเข้าได้มากสุด 300% ในขณะที่ซูมออก 50%
แล้วถ้าไม่อยากให้ซูมเข้าหรือซูมออกเลยหละ?(ถึงแม้จะไม่ดีที่จะใช้)
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
รับทําเว็บไซต์ 
แลกลิงค์ 
