วันนี้ระหว่างที่ผมนั่งเปิดเว็บอยู่เจอโพสต์อันหนึ่งที่รูปภาพใหญ่กว่าเนื้อที่แสดงผลของเว็บทำให้เห็นภาพไม่เต็ม เว็บทั่วไปจะกำหนดความกว้างของหน้าแบบคงที่เพื่อไม่ให้เว็บแสดงผลผิดเพี้ยนไปตามขนาดหน้าจอ ส่วนใหญ่ก็จะตั้งไว้ให้รองรับหน้าจอความกว้าง 1024px แต่ผมใช้จอที่มีความกว้าง 1920px ผมเลยใช้ Chrome Developer Tools ปรับ Layout ของเว็บนี้ให้ใหญ่ขึ้นเพื่อที่ผมจะได้เห็นรูปแบบเต็มๆ
ก่อนปรับแต่งจะเห็นว่าเห็นรูปแค่บางส่วน
กด F12 คลิกหาบรรทัดที่ทำให้เนื้อหาส่วนที่ต้องการเป็นสีฟ้า สังเกตุที่ด้านขวาจะมีบรรทัดที่เขียนว่า width: 950px; นี่คือ CSS ที่บีบความกว้างของเว็บนี้เอาไว้
คลิกที่ CSS บรรทัดที่ต้องการเพื่อเพิ่มความกว้าง หรือยกเลิกก็ได้ จะเห็นว่าเห็นรูปเต็มทั้งรูปแล้ว
กด F12 อีกครั้งเพื่อปิด Developer Tools ตอนนี้ก็ดูเว็บแบบเต็มจอได้แล้ว
นี่เป็นแค่ตัวอย่างง่ายๆ ในการใช้ Developer Tools ถ้าคุณใช้ CSS เป็นคุณก็ปรับรูปแบบเว็บต่างๆ ได้ตามที่ต้องการเลยครับ
