html5 device orientation (기기 방향전환)

http://blog.outsider.ne.kr/465

https://developer.mozilla.org/ko/docs/WebAPI/Detecting_device_orientation

http://www.html5rocks.com/en/tutorials/device/orientation/devicemotionsample.html

http://www.html5rocks.com/en/tutorials/device/orientation/

http://www.w3schools.com/jquerymobile/jquerymobile_events_orientation.asp

https://developer.chrome.com/devtools/docs/device-mode

http://qnibus.com/blog/useful-things-for-mobile-web-development/

■ 방향 감지방법1.

 - safari 브라우져 : onorientationchange

    ▶ iPhone OS 1.1.1 이후 : orientationchange 이벤트 지원.

    function updateOrientation()

    {

        if ( !window.orientation ) {

            // ( screen.width > screen.height );

            // 

        } else {

            switch(window.orientation) {

                case 0:

                    alert("0");

                    break;

                case -90:

                    alert("-90");

                    break;

                case 90:

                    alert("90");

                    break;

                case 180:

                    alert("180");

                    break;

            }

        }

    }

    window.onload = function() {

        document.body.onorientationchange = updateOrientation;

    }

    if ("onorientationchange" in window) {

        document.body.onorientationchange = updateOrientation;

    } else {

        window.onresize = updateOrientation;

    }

■ 방향 감지방법2.

    jquery mobile : $(window).on("orientationchange",function(event){

                        alert("Orientation is: " + event.orientation);

                    });

■ 방향 감지방법3(추천).

    var mql = window.matchMedia("(orientation: portrait)");

    if (mql.matches) {

        fRotation("portrait");

    } else {

        fRotation("landscape");

    }

    mql.addListener(function (m) {

        if (m.matches) {

            fRotation("portrait");

            $("p").text("The orientation has changed to portrait!").css({"background-color":"yellow","font-size":"300%"});

        }

        else {

            fRotation("landscape");

            $("p").text("The orientation has changed to landscape!").css({"background-color":"pink","font-size":"200%"});

        }

    });