วันจันทร์ที่ 30 พฤศจิกายน พ.ศ. 2552

javascript windows size

บางครั้งความจำเป็นในการพัฒนาเว็บที่ต้องใช้จาวาสคริป (java script) ในการ จัดวาตำแหน่งของข้อมูล หรือกล่องข้อมูลที่ได้มาจากการกำหนดจาก CSS การจัดวางตรงกลางหน้าจอ นี้ก็นับว่ามีความสำคัญอย่างยิ่ง และหลายครั้งก็จำเป็นต้องว่าข้อมูลไว้ที่หน้าจอ

เมื่อต้องการกำหนดข้อมูลต่าง ๆ ไว้ที่หน้าจอ ก็ต้องเกิดปัญหาต่อมาคือขนาดหน้าจอของผู้ใช้งานแต่เครื่องนั้นก็มีขนาดความ กว้าง 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 จะแสดงขนาดความสูงของหน้าจอ

ไม่มีความคิดเห็น:

แสดงความคิดเห็น