เมื่อต้องการกำหนดข้อมูลต่าง ๆ ไว้ที่หน้าจอ ก็ต้องเกิดปัญหาต่อมาคือขนาดหน้าจอของผู้ใช้งานแต่เครื่องนั้นก็มีขนาดความ กว้าง x ยาง (พิกเซล) ไม่เท่ากัน ย่อมเกิดความยุ่งยากในการจัดวางตำแหน่งของข้อมูลที่ให้อยู่ตรงกลางจอพอดี
ทางออกมีหลายทาง แต่ทางหนึ่งที่เราสามารถวัดขนาดของหน้าจอ (Browser ได้ว่า ตอนนั้น มีขนาด ความกว้าง width และ ความสูง height เท่าไหร่ โดยใช้ function ต่อไปนี้ในการประยุกต์ใช้งานได้
function showSize() {
var theW = 0, theH = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Modern Browser
theW = window.innerWidth;
theH = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
theW = document.documentElement.clientWidth;
theH = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
theW = document.body.clientWidth;
theH = document.body.clientHeight;
}
window.alert( 'Width = ' + theW );
window.alert( 'Height = ' + theH );
}
ตัวอย่างผลการเรียนกใช้งาน showSize();
ครั้งที่ 1 จะแสดง ขนาดความกว้าง |
ครั้งที่ 2 จะแสดงขนาดความสูงของหน้าจอ |