Check Mobile Orientation by JavaScript

มือถือใหม่ ๆ สามารถที่จะหันหน้าจอให้เป็น แนวตั้ง และแนวนอนได้ ส่วนการเข้าเว็บนั้นก็ไม่มีปัญหาอะไร แต่บางครั้งขนาดที่เปลี่ยนแปลงอยู่ตลอด ทำให้การจัดวางรูปภาพ หรือวิดีโอมีปัญหา คือไม่พอดีจนต้องสกลอร์ซ้าย-ขวาบ้าง ทางแก้ปัญหานี้ทำได้โดยการใช้ JavaScript ตรวจสอบขนาดหน้าจอ แล้วก็ย่อ/ขยายรูปภาพให้เหมาะสมกับขนาดที่เปลี่ยนแปลงไป (DEMO)

หมายเหตุ:

  • ผมใช้ jQuery ในการตรวจสอบ และกำหนดค่า เพราะทำง่ายดี ถ้าอยากจะใช้ JavaScript เดิม ๆ ก็ทำได้ไม่ยาก
  • ผมไม่มีมือถือสมัยใหม่ไว้ให้ทดลอง มีแต่ IE บน Windows Phone Emulator ซึ่ง IE มันใช้ onResize() ไม่ได้
  • iPhone มี event ตอนเปลี่ยนหน้าจอให้โดยเฉพาะ ลองหาดูเองนะ

ส่วนของ HTML

{syntaxhighlighter brush: xml}

Size: ?x?

{/syntaxhighlighter}

<body onResize="checkMode()"> สำหรับส่ง event ตอนเปลี่ยนขนาดหน้าจอ (จะหันจอ หรือย่อขยายหน้าต่างก็นับหมด)

ส่วนของ JavaScript (jQuery)

{syntaxhighlighter brush: jscript} function horMode() { $('.image').width(400); $('.image').height(227); $('#sizeImg').text("Size: 400x227"); }

function verMode() { $('.image').width(706); $('.image').height(400); $('#sizeImg').text("Size: 706x400"); }

function checkMode() { if (window.innerHeight > window.innerWidth) { horMode(); } else { verMode(); } }

$(function() { checkMode(); if ($.browser.msie) { $('#note').text("IE is not support onResize()"); } }); {/syntaxhighlighter}

ผมเขียน 2 ฟังชั่นสำหรับเปลี่ยนขนาดคือ horMode() และ verMode() โดยขนาดหน้าจอ ไม่จำเป็นต้องตายตัวก็ได้ แต่เบราว์เซอร์คงทำงานหนักน่าดู

ส่วน checkMode() เอาไว้ตรวจสอบว่าหน้าจอเป็นแบบไหน ถ้า กว้างมากกว่ายาว ก็เป็น แนวนอน; ถ้า กว้างน้อยกว่ายาว ก็เป็น แนวตั้ง ซึ่งให้ตรวจสอบตอนโหลดหน้าเว็บเสร็จด้วย

ส่วน if ($.browser.msie) { ... } เอาไว้ตรวจสอบว่าเป็น IE หรือไม่ ถ้าใช่ก็ให้แสดงข้อความว่า ไม่สนับสนุน

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.