ปรับ layout หน้าเว็บไซต์อัตโนมัติตามขนาดของ browser

ก็มีหลายวิธีนะครับ วิธีที่ง่ายสุดเห็นจะเป็นใช้ ตาราง เป็น layout ครับ เพียงกำหนด <table width=100%> ก็จะได้ layout ที่เปลี่ยนแปลงตามขนาดจอภาพแล้ว



ส่วนวิธีอื่นๆ ก้เช่น ถ้าใช้ tableless เช่น การใช้ div เป็น layout ก็สามารถกำหนด width เป็น 100% ได้ใช้กัน แต่การรักษารูปเว็บเช่น ตำแหน่งของ sidebar จะยากกว่าการใช้ table



วิธีอื่นๆอีกคือใช้ Javascript ครับ แต่ปัจจุบันไม่ตค่อยนิยมแล้ว



จริงๆแล้วไม่ว่าวิธีไหนก้แล้วแต่ ไม่ได้มีวิธีสำเร็จรูปครับ เพราะ layout หน้าตาเว็บแต่ละแบบ อาจต้องการ การกำหนด css ที่แตกต่างกันไป ไม่สามารถกำหนดของเขตุและวิธีที่ชัดเจนได้ ดังนั้น ถ้าคิดจะทำก็คงต้องกำหนด css ให้ดีครับ โดยมีกฎเพียงข้อเดียวว่า ถ้าต้องการขนาดของ layout ที่ปรับเปลี่ยนไปตามขนาดของหน้าจอ ให้กำหนดความกว้างทั้งหมดให้เป็น % ครับ

จากเว็บตัวอย่างที่ผมให้ไป ไม่ได้ปรับแค่ขนาดเท่านั้นนะครับ แต่โครงสร้างของหน้าเว็บไซต์ก็ปรับด้วย

สังเกตุจาก โลโก้ที่อยู่ริมซ้าย พอย่อ browser ก็มาอยู่ตรงกลาง , เมนู พอย่อ browser ก็เปลี่ยนเป็น combo box แทนครับ

อืมเนาะ ... ก้ไม่ได้สังเกตุเหมือนกัน



กรณีข้างต้น แสดงว่าเขาก็คงใช้ Javcascript แหละครับไม่มีตัวเลือกอื่น เพราะ CSS ธรรมดาคงไม่สามารถทำแบบนี้ได้



วิธีการที่ใช้กันทั่วไป แบบง่ายสุดก้คือการตรวจจับความกว้างของ document ครับ ถ้า หากความกว้างของ document น้อยกว่าที่กำหนด ก็ให้แสดง layout ในแบบหนึ่ง หากปกติก็ใช้แบบหนึ่ง



หรือเอาง่ายๆคือ ใช้ javascript ตรวจสอบว่า ความกว้าง น้อยกว่า 500px ให้กำหนด class ให้ body=mobile และถ้า ขนาดความกว้างปกติ ก็กำหนด class=desktop เป็นต้น



หลังจากนั้นก็เขียน CSS แยก ออกเป็น 2 ส่วน คือ css ภายใต้ body.mobile และ body.desktop



ส่วนเมนูที่เห็น อาจใช้วิธีเตรียมไว้ก่อน และใช้ วิธีซ่อนเอาตาม class ของ body ก้ได้ครับ เช่น



body.mobile div#logo {

  text-align: center;

}

body.desktop div#logo {

  text-align: left;

}

คุณ Goragod พอจะมี javascript สำหรับตรวจสอบความกว้างที่ว่ามั้ยครับ

document.width หรือ window.screen.width ประมาณนี้แหละครับ

ขอบคุณครับ เดี๋ยวจะลองต่อยอดดูครับ

ลองใช้ bootstrap หรือ foundation (มีหลายตัวแล้วแต่ความถนัด)  ดูสิ อาจจะง่ายกว่า