Categories
HTML & CSS

ตั้งค่า HTML ให้แสดงผลใน Mobile


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 ด้วย

 

unnamed (2)ที่มา https://msdn.microsoft.com/en-us/magazine/hh288079.aspx

 

เมื่อเปิดใน Web browser ปกติ บน Desktop จะแสดงผลแบบนี้

Screen Shot 2558-01-25 at 14.33.21
การแสดงผลเมื่อเปิดใน Web browser

 

แต่พอเปิดในโทรศัพท์ก็จะแสดงผลแบบ ใน Desktop เลย เพียงแต่ว่าหน้าจอเล็กกว่า

Screen Shot 2558-01-25 at 14.33.48
การแสดงผลในโทรศัพท์ (iPhone6)

 

ทำให้ต้องซูมเพื่อจะอ่านเนื้อหา จึงต้องใช้คำสั่ง viewport เข้ามาช่วยในการแสดงผล

 

ทีนี้จะลองใส่คำสั่ง viewport ดู

 

 

จะต้องใส่ไว้ในส่วน <head>….</head> นะครับ

 

คำสั่งใน vieweport  width=device-width จะบอกให้ Web browser สร้าง viewport ให้เท่ากับ viewport ของ device

 

ส่วน initial-scale=1 คือ ให้ ขนาดเริ่มต้นเท่ากับ 1

 

Screen Shot 2558-01-25 at 14.42.09
แสดงผลได้พอดีกับขนาดหน้าจอ

 

แต่ยังสามารถซูมได้อยู่

 

ถ้าต้องการไม่ให้ซูม (เพื่อให้เหมือน native app) ให้เพิ่มคำสั่ง

 

user-scalable=no

 

 

คือ ทำให้ไม่สามารถซูมได้

 

ทีนี้ Web เราก็เป็น Web application ที่คล้ายๆ native application แล้ว

 

และยังมี viewport พิเศษของ Apple อีกด้วย เอาไว้ใช้แสดงผลเฉพาะ iDevice ทั้งหลาย

 

ของติดค้างไว้ก่อนนะครับ iPad ผมจอแตกอยู่ยังไม่มีอุปกรณ์มาทดสอบ T-T

 

แต่ทิ้งลิงค์ไว้ให้เอาไปลองเล่นดูครับ

 

https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW3

By Mai

ชื่อใหม่ครับ ชอบการพัฒนาเว็บไซต์ ศึกษาหาข้อมูลอยู่เรื่อย มีความรู้หรือเทคนิคอะไรใหม่ๆ ก็จะมาแบ่งปันกันครับ