판단하는 방법
모바일 장치는 두 개의 객체, 하나의 속성 및 하나의 이벤트를 제공합니다.
(1) Window.orientation은 Window 객체의 이전 속성에 속합니다. 세 가지 값이 있습니다. 0은 초상화, 90은 왼쪽으로 반전되고 조경 모드로 변하고 -90은 오른쪽으로 반전되고 조경 모드로 변하며, 마지막 180은 장치가 바닥 또는 수직으로 반전되는지 여부입니다.
(2) OrientationChange는 PC에 사용 된 크기 조정 이벤트와 마찬가지로 장치가 회전 할 때이 이벤트를 트리거하는 이벤트입니다.
이 두 가지를 함께 사용하면 장치의 수평 및 수직 스크린 상태를 쉽게 얻을 수 있습니다. 코드는 다음과 같습니다.
(function () {var init = function () {var updateorientation = function () {var derectation = swool Body.parentNode.setAttribute ( 'class', windCSS에서는 다음과 같은 방식으로 쓸 수 있습니다.
/** Performance Div Border는 파란색 **/. 초상화 본체 div {테두리 : 1px solid blue;}/** 성능 부두를 보여줍니다.물론 미디어 쿼리 (권장)를 사용할 수도 있습니다.
@Media all 및 (오리엔테이션 : 초상화) {Body Div {Border : 1px Solid Blue; }}@Media All 및 (방향 : 풍경) {Body Div {Border : 1px Solid Yellow; }}호환성
장치에 Window.orientation 또는 OrientationChange가 존재하지 않는 상황을 처리하는 방법은 무엇입니까? (일반적으로 하나는 존재하지 않고 다른 하나는 존재하지 않습니다. 그렇지 않으면)
초기 개발에서 Chrome의 장치 모델 모드는 종종 사용되지만이 속성은 존재하지 않으므로 어떻게이 값을 얻을 수 있습니까? 간단한 방법은 너비와 높이의 비교를 기반으로 판단하는 것입니다. 너비가 높이보다 작 으면 수직 스크린이고 너비와 높이는 수평 스크린입니다.
결과를 얻는 방법을 알고 있습니다. 다음은 장치 반전 이벤트를 듣는 방법입니다. OrientationChange를 사용할 수 없으므로 가장 기본적인 크기 조정 이벤트를 사용하거나 타이머를 사용하여 감지하십시오. 코드를보십시오.
(function () {var updateorientation = function () {var Orientation = (window.innerwidth> wind event window.addeventListener ( 'resize', updateorientation, false);마지막으로 위의 두 가지 방법을 결합하는 것은 완전한 감지 솔루션입니다.
(function () {var supportorientation = (typeof window.orientation === 'number'&& typeof wind 오리엔테이션 = rectrait. AddeventListener ( 'OrientationChange', updateorientation} else.요약
OrientationChange 이벤트를 사용하여 장치가 회전하는지 모니터링하고 Window.orientation 속성을 사용하여 현재 수평 또는 수직 화면인지 여부를 결정하여 다른 작업을 수행하십시오.