วิธีตรวจสอบการ Set หน้าจอ ของเครื่องอื่นๆ เพื่อเลือกภาพมาทำ Background ให้เหมาะสม

เคยนึกกันไหมครับ ว่าเวลาเราทำ Blog หรือ HTML อะไรก็ตาม แล้วต้องมีภาพ Background แต่ทีนี้เราจะรู้ได้ยังไงว่าเราจะต้องทำ Background ให้มีขนาดเท่าไหร่ เพราะแต่ละคนก็ตั้งค่าหน้าจอไม่เหมือนกัน มันควรจะเป็นอย่างนั้น .. แต่จะทำยังไงล่ะ .. ถ้าได้อย่างนี้ล่ะก็ Optimize ได้เยี่ยมเลย

วิธีการไม่ยากครับ

1. สร้างภาพ Background ขึ้นมาโดยมีขนาดดังนี้
   • 640 x 480 (ตอนนี้คงไม่มีใครใช้ขนาดนี้แล้วมั้ง แต่ทำไว้เผื่อ)
   • 800 x 600 อันนี้หลายคนก็ใช้อยู่
   • 1024 x 768 ส่วนมากก็จะเป็นอันนี้
   • 1280 x 1024 ใครจะใหญ่ๆ ก็เริ่มจะเป็นขนาดนี้แล้วครับ
   • 1400 x 1050 ใหญ่มากเลยนะเนี่ย
2. ใช้ Javascript เก็บชื่อไฟล์เหล่านี้เอาไว้ใน Array
3. ใช้ Javascript ตรวจสอบการตั้งค่าจอภาพ
4. เลือกภาพให้ได้ตามที่ตรวจสอบได้ แล้วกำหนดให้ภาพนั้นนำมาใช้เป็น Background

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

การเก็บชื่อของไฟล์ภาพใน Array
ทำดังนี้ครับ

<script language=javascript>
var myBackground=new Array(5)
myBackground[0] = "//เว็บที่เก็บภาพ/bg640.jpg"
myBackground[1] = "//เว็บที่เก็บภาพ/bg800.jpg"
myBackground[2] = "//เว็บที่เก็บภาพ/bg1024.jpg"
myBackground[3] = "//เว็บที่เก็บภาพ/bg1280.jpg"
myBackground[4] = "//เว็บที่เก็บภาพ/bg1400.jpg"
</script>

การตรวจสอบหน้าจอ
จริงๆ การตรวจสอบหน้าจอนี้ เราตรวจสอบแค่ขนาดของความกว้างก็ได้ครับ เพราะยังไง มันก็เป็นอัตราส่วน 4:3 กันอยู่แล้ว

<script language=javascript>
width = window.screen.width;
switch (width){
     case 640 : document.body.background = myBackground[0]; break;
     case 800 : document.body.background = myBackground[1]; break;
     case 1024 : document.body.background = myBackground[2]; break;
     case 1280 : document.body.background = myBackground[3]; break;
     case 1400 : document.body.background = myBackground[4]; break;
}
</script>

แค่นี้ล่ะครับ วิธีจะทำให้ง่ายๆ ก็ทำใส่ไฟล์ .js เอาไว้ข้างนอก แล้วเรียกเอานะครับ เช่น

<script language=javascript src="//เว็บของเรา/ไฟล์.js"></script>

แล้วทีนี้ในไฟล์ .js ของเราก็ไม่ต้องมี <script..> เพื่อเปิด กับ </script> เพื่อปิดนะครับ เพราะมันจะ error
แล้วในไฟล์ js นี้ สามารถขึ้นบรรทัดใหม่ได้ปกติครับ (ถ้าเราใส่ javascript ใน blog แล้วมีขึ้นบรรทัดใหม่ มันจะ error)

ปล. แถมให้ครับ ว่าเครื่องของคุณมีการตั้งค่าหน้าจอเอาไว้ยังไงบ้าง
หน้าจอของคุณตอนนี้ มีความกว้าง Pixel
และมีความสูงของจอเป็น Pixel