方向の変化を検出するには、イベント リスナーをウィンドウにアタッチします。
window.addEventListener('orientationchange', updateOrientation, false);
updateOrientation 関数では、デバイスの向きを検出し、それに応じてビューポート属性をリセットできます。
function updateOrientation() {
if (!(navigator.userAgent.match(/iPhone/i)) && !(navigator.userAgent.match(/iPod/i))) {
return;
}
var viewport = document.querySelector("meta[name=viewport]");
switch (window.orientation) {
case 0: //portrait
//set the viewport attributes to whatever you want!
//For Ex : viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=1;');
break;
case 90: case -90: //landscape
//set the viewport attributes to whatever you want!
break;
default:
//set the viewport attributes to whatever you want!
break;
}
}