อยู่ในช่วงปรับเว็บเพจที่พัฒนาใช้งานบน PC ให้สามารถรันบน browser ใน มือถือได้ด้วย เลยต้องปรับแต่งหน้าจอเพื่อให้ผู้ใช้งานได้สะดวก
[/size]ในที่นี้ขอแชร์วิธีการเพิ่มขนาดเว็บเพจ เพื่อให้พอดีกับหน้าจอ Safari บน iPhone ด้วยการใช้ viewport
[/size]
[/size]ตัวอย่างไฟล์ HTML แบบง่ายๆ สำหรับหน้าจอการ Login
<html> <head> <title>Login</title> </head> <body> <div style="padding: 5px; background-color: #cccccc"> <form> Username:<br> <input type="text" name="username"> <br> Password:<br> <input type="text" name="password"><br> <br> <input type="submit" value="login"> </form> <> </body> </html>
[/size]เมื่อเปิดด้วย Safari บน iPhone จะเป็นแบบนี้
[/size] (http://spalinux.com/wp-content/uploads/2011/11/Picture-001.png)[/url]
จะเห็นว่า ขนาดของฟอร์มมีขนาดเล็กเกินไป ผู้ใช้จำต้องขยายขนาด เพื่อจะกดใช้งาน ทำให้ไม่สะดวก
ได้ไอเดียมาจากหน้า login ของโปรแกรม wordpress โดยต้องเพิ่ม tag meta viewport ในไฟล์ HTML เพื่อให้ขนาดของเว็บเพจมีขนาดใหญ่ขึ้น
<html> <head> <title>Login</title> [/color]<meta name="viewport" content="width=320; initial-scale=0.9; maximum-scale=1.0; user-scalable=0;" /> </head> <body> <div style="padding: 5px; background-color: #cccccc"> <form> Username:<br> <input type="text" name="username"> <br> Password:<br> <input type="text" name="password"><br> <br> <input type="submit" value="login"> </form> <> </body> </html>
เมื่อเปิดด้วย Safari บน iPhone ขนาดก็จะเพิ่มขึ้นมา
[/size] (http://spalinux.com/wp-content/uploads/2011/11/Picture-002.png)
สามารถปรับเปลี่ยนตามที่ต้องการได้ ทดลองดูให้เหมาะกับเว็บเพจของคุณ
<html> <head> <title>Login</title> [/color]<meta name="viewport" content="width=100%; initial-scale=1.4; maximum-scale=1.4; user-scalable=0;" /> </head> <body> <div style="padding: 5px; background-color: #cccccc"> <form> Username:<br> <input type="text" name="username"> <br> Password:<br> <input type="text" name="password"><br> <br> <input type="submit" value="login"> </form> <>
</body> </html>
[/color][/size] (http://spalinux.com/wp-content/uploads/2011/11/Picture-003.png)[/color][/color][/size][/font]