Implementer Limited

Solution design & implementation

ปรับ Layout เว็บด้วย Chrome

by admin on May 5, 2013, no comments

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

ก่อนปรับแต่งจะเห็นว่าเห็นรูปแค่บางส่วน
im-0006.jpg

กด F12 คลิกหาบรรทัดที่ทำให้เนื้อหาส่วนที่ต้องการเป็นสีฟ้า สังเกตุที่ด้านขวาจะมีบรรทัดที่เขียนว่า width: 950px; นี่คือ CSS ที่บีบความกว้างของเว็บนี้เอาไว้
im-0007.jpg

คลิกที่ CSS บรรทัดที่ต้องการเพื่อเพิ่มความกว้าง หรือยกเลิกก็ได้ จะเห็นว่าเห็นรูปเต็มทั้งรูปแล้ว
im-0008.jpg

กด F12 อีกครั้งเพื่อปิด Developer Tools ตอนนี้ก็ดูเว็บแบบเต็มจอได้แล้ว
im-0009.jpg

นี่เป็นแค่ตัวอย่างง่ายๆ ในการใช้ Developer Tools ถ้าคุณใช้ CSS เป็นคุณก็ปรับรูปแบบเว็บต่างๆ ได้ตามที่ต้องการเลยครับ

Leave a Reply

Your email address will not be published. Required fields are marked *

*