ปรับความกว้างของหน้าเว็บ

จากภาพถ้าเพื่อน ๆ ปรับขนาดความกว้างของเว็บเป็น 80% หน้าเว็บของเพื่อน ๆ ก็จะได้ออกมาคล้าย ๆ กับในภาพคือ ขอบของเว็บจะไม่เต็มจอภาพ จะมีพื้นที่ว่าง ๆ ด้านซ้ายขวาของจอภาพ แต่ถ้าเพื่อน ๆ ปรับขนาดความกว้างของเว็บ ให้เป็น 100% ขอบของเว็บซ้ายขวาจะเต็มหน้าจอ ของดูภาพด้านล่างนะครับ

ส่วนวิธีการปรับขนาดให้ทำตามดังนี้

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

ใส่แบบเป็น เปอร์เซ็นต์ ข้อดีก็คือว่า หน้าจะเว็บเราจะ ขยาย ย่อ ไปตามขนาดของเครื่องที่เราเปิดใช้ ต้องบอกก่อนครับว่า เครื่องคอมพิวเตอร์ที่เราเปิดใช้ในแต่ละเครื่องอาจจะ มีความกว่า pixel ไม่เท่ากัน เพื่อน ๆ อาจจะเคยเห็นว่าทำไมบางเครื่องไอคอนเล็กจัง และบางเครื่องทำไมไอค่อนดูใหญ่ ก็เพราะการตั้ง Resolution แต่ละเครื่องต่างกันครับ บางเครื่องถูกตั้งความกว้างไว้แค่ 1024 pixel แต่บางเครื่ออาจจะตั้งความกว้าวละเอียดขึ้นมาอีกนิดคือ 1280 pixel และบางเครื่องก็อาจตั้งความกว้างละเอียดมากแบบว่าละเอียดเต็มที่ของความสามารถเครื่องเลย ดังน้ันการตั้งความกว้างแบบ เปอร์เซ็นต์ หน้าจอของเว็บจะปรับความกว้าง โดยคอมพิวเตอร์ของเราจะคำนวณความกว้างเป็นเปอร์เซ็นตามที่เรากำหนดไว้

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

วิธีดูว่าหน้าจอคอมพิวเตอร์ของเราละเอียด Resolution เท่าไรดูตามภาพนี้ครับ

สำหรับผมสิ่งที่เป็นปัญหาคือ ภาพหัวเว็บของเราที่ทำไว้ครับ

เวลาหน้าจอเว็บปรับขนาดอัตโนมัติ แต่ภาพหัวเว็บจะไม่ได้ปรับขนาดด้วย ถ้าเราสร้างภาพหัวเว็บไว้ที่ 1280 pixel

เวลาที่เราเปิดในเครื่องที่มีความละเอียดความกว้าง 1280 pixel ผลที่ได้ ก็จะพอดีหน้าจอไม่มีอะไรให้ตกใจและลำคาญใจ

ตามแบบภาพข้างล่างนี้

แต่ถ้าเราไปเปิดหน้าจอที่มีความละเอียดน้อยกว่า 1280 pixel การแสดงผลก็จะเปลี่ยนเป็นอีกแบบ จะมีบางส่วนของหัวเว็บหายไป

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

จะใหญ่ขึ้น

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

ในเว็ปนี้ NineTuttu ตั้งเป็นแบบที่ 2 ครับ คือกำหนด pixel ไว้ที่ 1258 pixel ครับ ดังนั้นถ้าเปิดในหน้าจอที่มึการตั้ง Resolution ความกว้างไว้ตั้งแต่ 1258 ขึ้นไป เว็บนี้จะไม่มีปัญหาในการแสดงผลครับ แต่ถ้ายิ่งไปเปิดในเครื่องที่มีความละเอียดมาก ๆ หน้าจอก็จะเริ่มเล็กลง ๆ นะครับ ได้อารมณ์ประมาณนี้ครับ ..