ขยายขนาดภาพอุปกรณ์โมบายล์

ขยายขนาดภาพอุปกรณ์โมบายล์

เทคนิคในการสร้างภาพขยายขนาด

ภาพที่ขยายขนาดได้

   เราระมัดระวังเพื่อให้แน่ใจว่า อินเตอร์เฟซของเราปรับไปตามความละเอียดจอภาพ ด้วยการใช้หน่วยแบบ relative unit (ems) แต่ภาพในอินเตอร์เฟซนั้นยังคงมีขนาดคงที่เสมอ ถ้าเราดูที่แอปพลิเคชั่นที่กำลังทำงานอยู่นี้ ใน iPhone 4 เราจะเห็นไอคอนที่ยังเป็นหน่วย pixel นั้นมีลักษณะพร่ามัว

การใช้ภาพที่มีความละเอียดสูงควรติดลงใน HTML มากกว่าที่จะจัดด้วย CSS โดยวางไว้พื้นหลัง การทำเช่นนี้จะทำได้ด้วยการใช้เทคนิคเล็กน้อย สำหรับภาพที่จัดด้วย CSS นั้นจะเป็นคนละเรื่องกัน ดังนั้นจึงมีทางเลือกในโฮสต์ (Host) หลายทางที่จะจัดสิ่งต่างๆ สำหรับความละเอียดที่ต่างกัน

ปัญหาสำหรับความละเอียดที่เปลี่ยนไปตลอดเวลา ถึงแม้ว่าเราจะเลือกเฉพาะอุปกรณ์ในวงจำกัด แต่ เราก็จำเป็นต้องปรับให้ลงตัวกับความละเอียดหลายขนาด ดังที่แสดงในตาราง

ตารางความละเอียดจอภาพ ของอุปกรณ์โมบายล์ที่ใช้งานทั่วไป

iPhone 4 326ppi (pixels per inch)
iPhone 3G/3GS 163ppi
iPad/iPad2 132ppi
Android devices ระหว่าง 72-350ppi
HTC Touch Pro 287ppi
Palm Pre 186ppi

มีรายละเอียดจอภาพหลายอย่างที่เราสามารถลองใช้งาน แต่มันอาจทำให้เกิดความสับสนได้ง่าย เราจึงเลือกใช้วิธีทำงานโดยตรงด้วยการใช้ SVG ในจุดที่ต้องการสร้างอินเตอร์เฟซที่สามารถปรับใช้ได้กับความละเอียดจอภาพทุกขนาด ต้องการเพียงแค่ว่ามันสามารถใช้กับ SVG ได้เท่านั้นก็เพียงพอแล้ว

SVG มีประโยชน์เหนือภาพ Bitmap สองสามอย่าง อย่างแรกคือ มันเปิดกว้างและอยู่ในมาตรฐานของ W3C อย่างที่สองสำหรับกราฟิกที่ง่ายๆ จะมีขนาดเล็กกว่าภาพเดียวกันแบบ Bitmap ซึ่งเป็นสิ่งดีสำหรับผู้ใช้งาน สุดท้ายสิ่งสำคัญที่สุดคือ มันสามารถปรับให้มีขนาดเท่าใดก็ได้ โดยไม่เสียรายละเอียดของภาพและกลายเป็นแบบ pixelated สำหรับในเบราเซอร์นั้น SVG จะมีใน iOS จากเวอร์ชั่น 2.1 และรวมไว้ใจ Android ตั้งแต่เวอร์ชั่น 3.0

อีกครั้งที่ Modernizr Library ได้ช่วยทำงานที่เป็นเรื่องยากสำหรับเรา ทั้งยังเพิ่มการสนับสนุน SVG ทั้งแบบ inline และ embedded ถึงแม้ว่าเราจะสนใจเฉพาะแบบ embedded ขณะนี้ สำหรับ CSS gradient นั้น Modernizr จะเพิ่ม class ในอิลิเมนต์ html เพื่อบอกการทำงานของ SVG ว่าทำได้หรือไม่ สำหรับ embedded SVG จะแสดงด้วย class ชื่อ svg

สำหรับอุปกรณ์ที่สามารถใช้ SVG ได้นั้น เราสามารถใช้ภาพกับความละเอียดจอภาพทุกขนาดได้อย่างง่ายดาย เพียงอ้างถึงภาพจาก sprite.png เป็น sprite.svg ตัวอย่างเช่น ในแท็บบาร์เราสามารถเพิ่มบล็อกของไฟล์ CSS ได้มันง่ายมาก ทันทีที่ขนาดของสองภาพแบบ Sprite เข้ากันได้ดี ก็ไม่ต้องเปลี่ยนแปลงอะไรในโค้ดของเรา

ความสมบูรณ์แบบของ Pixel

SVG ไม่เคยมีขนาดที่เราต้องการให้เป็น เพราะเป็นภาพที่ขยายขนาดได้ ซึ่งมีความหมายว่าเราให้เบราเซอร์ทำหน้าที่ปรับขนาดภาพ ซึ่งอาจจะเล็กกว่าที่ต้องการ บางทีภาพอาจจะเสียไปบริเวณขอบ โดยเฉพาะเมื่อเป็นเส้นเล็กๆ หรือมีรายละเอียด ถ้าต้องการสร้างภาพที่ดีที่สุดในทุกความละเอียดของภาพที่เราต้องการใช้งาน จะทำได้โดยใช้ Media Queries ที่ขึ้นกับความหนาแน่นแบบ pixel ของอุปกรณ์นั้นๆ


Copyright © อุปกรณ์โมบายแอพพลิเคชั่น All rights reserved.