มาเขียน Mobile HTML5 App กัน ตอน แสดงผลหน้าจอหลายขนาด

ผมมักจะเขียน HTML5 App แล้วทดสอบบน Tablet ซึ่งมีขนาดหน้าจอใหญ่โต 1280x720px ซึ่งมีพื้นที่เหลือเฟือในการแสดงผล แต่ถ้าหน้าจอเล็กๆ อย่าง 320px, 480px, 640px ล่ะจะทำอย่างไร? ซึ่งแน่นอนว่าการแสดงผล อย่างเช่น ภาพ ขนาดตัวอักษร ฯลฯ จะไม่เหมาะสม ตัวอย่างเช่น

จากภาพจะเห็นว่าเราอ่านการ์ตูน I am Petdo! ได้แค่ครึ่งเดียว ทีนี้ทำยังไงดี วิธีง่ายๆ คือการใช้ความสามารถของ CSS3 ครับ ใน CSS3 จะมีคำสั่งพิเศษชื่อว่า media ซึ่งคำสั่งนี้ใช้เพื่อกำหนดความเหมาะสมของ CSS ในแต่เหตุการณ์ เช่น หน้าจอมีขนาดเล็กบ้าง ใหญ่บ้าง เป็นต้น ทีนี้เราก็มากำหนด CSS ให้ I am Petdo! กันใหม่ เพิ่มคำสั่ง media เข้าไปดังนี้

@media screen and (min-width: 320px) {
img.imagefield {
width:280px;
height:auto;
}
}

@media screen and (min-width: 480px) {
img.imagefield {
width:400px;
height:auto;
}
}

@media screen and (min-width: 800px) {
img.imagefield {
width:563px;
height:auto;
}
}

จากโค้ดข้างต้น หากหน้าจอมีขนาดเล็ก 320px ให้ ภาพที่ใช้ class imagefield มีขนาดความกว้าง 280px ตามลำดับ เท่านี้คุณก็จะได้หน้าจอการแสดงผลที่ดูดีขึ้น ดังนี้

ลองเอาไปประยุกต์ใช้กันดูได้ครับ อ้อและอีกอย่างนึง อย่าลืมกด Like ให้ ThaiOpenSource นะครับ