Notice: A non well formed numeric value encountered in /home/chonable/domains/chonable.com/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118
Notice: A non well formed numeric value encountered in /home/chonable/domains/chonable.com/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119
Notice: A non well formed numeric value encountered in /home/chonable/domains/chonable.com/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118
Notice: A non well formed numeric value encountered in /home/chonable/domains/chonable.com/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119
ถึงแม้อุปกรณ์เคลื่อนที่เช่น โทรศัพท์ แทปเล็ต ทั้งหลาย จะสามารถแสดงผล HTML ได้ แต่บางทีก็แสดงผลไม่ถูกต้องอย่างที่ควรจะเป็น ในตอนที่ทำเป็น Web Application
เมื่อทำเป็น Web Application ที่ต้องมีความสามารถในการแสดงผลได้เกือบทุกอุปกรณ์ จึงจำเป็นต้องใช้ คำสั่ง viewport เพื่อบอก Web browser ให้แสดงผลให้ถูกต้องตามขนาดหน้าจออุปกรณ์ แล้วก็ช่วยในเรื่อง Web responsive ด้วย
เมื่อเปิดใน Web browser ปกติ บน Desktop จะแสดงผลแบบนี้
การแสดงผลเมื่อเปิดใน Web browser
แต่พอเปิดในโทรศัพท์ก็จะแสดงผลแบบ ใน Desktop เลย เพียงแต่ว่าหน้าจอเล็กกว่า
การแสดงผลในโทรศัพท์ (iPhone6)
ทำให้ต้องซูมเพื่อจะอ่านเนื้อหา จึงต้องใช้คำสั่ง viewport เข้ามาช่วยในการแสดงผล
ทีนี้จะลองใส่คำสั่ง viewport ดู
|
1 |
<meta name=viewport content="width=device-width, initial-scale=1"> |
จะต้องใส่ไว้ในส่วน <head>….</head> นะครับ
คำสั่งใน vieweport width=device-width จะบอกให้ Web browser สร้าง viewport ให้เท่ากับ viewport ของ device
ส่วน initial-scale=1 คือ ให้ ขนาดเริ่มต้นเท่ากับ 1
แสดงผลได้พอดีกับขนาดหน้าจอ
แต่ยังสามารถซูมได้อยู่
ถ้าต้องการไม่ให้ซูม (เพื่อให้เหมือน native app) ให้เพิ่มคำสั่ง
user-scalable=no
|
1 |
<meta name=viewport content="width=device-width, initial-scale=1,user-scalable=no"> |
คือ ทำให้ไม่สามารถซูมได้
ทีนี้ Web เราก็เป็น Web application ที่คล้ายๆ native application แล้ว
และยังมี viewport พิเศษของ Apple อีกด้วย เอาไว้ใช้แสดงผลเฉพาะ iDevice ทั้งหลาย
ของติดค้างไว้ก่อนนะครับ iPad ผมจอแตกอยู่ยังไม่มีอุปกรณ์มาทดสอบ T-T
แต่ทิ้งลิงค์ไว้ให้เอาไปลองเล่นดูครับ