อยู่ในช่วงปรับเว็บเพจที่พัฒนาใช้งานบน 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][/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]สามารถปรับเปลี่ยนตามที่ต้องการได้ ทดลองดูให้เหมาะกับเว็บเพจของคุณ
<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][/color][/color][/size][/font]
