미디어를 사용하여 화면 너비에서 발생하는 문제를 확인하십시오.
iOS에서는 화면을 회전 할 때 할 수 있지만 Android에서는 응답하지 않았습니다. 수평 화면은 여전히 내 수직 스크린 스타일을 보여줍니다.
정보를 확인한 후 CSS3의 미디어가 모바일 측면에 더 나은 디스플레이 효과를 원한다면이 코드를 페이지 헤더에 추가해야합니다.
<meta name = "viewport"content = "width = device-width, 초기 스케일 = 1.0, 최대 규모 = 1.0, 사용자-규모 = no">
하지만이 코드를 사용할 수 없습니다. 내 페이지가 조정되었으므로 글꼴 크기와 스타일 크기는 화면 크기에 따라 표시 될 수 있습니다. 이 코드를 추가하면 적응이 작동하지 않습니다. 다른 방법을 사용하십시오
해결책:
모바일 장치는 이벤트 : OrientationChange 이벤트를 제공합니다
이 행사는 사파리를 위해 Apple에 의해 추가되었습니다. 개발자가 사용자가 장치를 가로보기에서 초상화보기 모드로 전환시기를 결정할 수 있도록합니다.
이 이벤트는 장치가 회전하면 트리거됩니다.
// 오리엔테이션 changesswindow.AdDeventListener ( "OrientationChange", function () {// 새 방향 번호 숫자 (window.orientation);}, false);사용자가 장치의보기 모드를 변경하는 한 OrientationChange 이벤트가 트리거됩니다. 현재 이벤트 객체에는 귀중한 정보가 포함되어 있지 않습니다.
유일한 관련 정보는 Window.orientation을 통해 액세스 할 수 있으므로
오리엔테이션 속성
0,90, -90의 세 가지 값이 있습니다
0은 초상화이고 -90은 장치가 오른쪽의 조경 모드로 가로로 회전한다는 것을 의미하는 반면 90은 장치가 왼쪽의 조경 모드로 수평으로 회전 함을 의미합니다.
180 인 또 다른 것이 있습니다. 이것은 수직 화면을 의미하지만 수직 스크린 모드를 뒤집습니다. 그러나이 모델은 아직 지원되지 않았습니다.
그림과 같이 :
따라서이 OrientationChange 이벤트와 창의 방향 특성을 결합하면 장치가 수평 또는 수직 화면에 있는지 확인하는 것이 더 쉽습니다.
(function () {var init = function () {var updateorientation = function () {var intribute = swool //plusportDocument.body.body.parentNode.setAttribute('Class', Orientation);} ;//이 이벤트는 각 회전에 대해 호출됩니다.따라서 다른 회전 상태에 따라 클래스를 추가 할 수 있으므로 CSS는 다음과 같이 쓸 수 있습니다.
/** 퍼포먼스 바디는 빨간색 **/. 초상화 본체 div {배경 : 빨간색;}/** 핸드 와이드 바디 쇼 파란색 **/. 풍경 바디 {배경 : 파란색;}또 다른 글쓰기 방법은 미디어 쿼리를 사용하는 것입니다
@Media all and (Orientation : Portrait) {Body Div {Back }}이 오리엔테이션 미디어 쿼리는 iOS3.2+ 및 Android 2.0+에서 작동합니다.
비교적 말하면, 이런 종류의 코드는 조금 더 간결합니다. 위의 JS+CSS를 사용하면 이러한 종류의 코드는 순수한 CSS입니다. 장치가 회전하면 방향을 변경하는 CSS가 회전 된 장치의 방향에 따라 호출됩니다.
호환성
일부 장치는 OrientationChange 이벤트를 제공하지 않지만 Window의 크기 조정 이벤트를 트리거하지 않습니다. 미디어 쿼리가 지원하지 않으면 어떻게해야합니까?
크기 조정 이벤트로 판단 할 수 있습니다. 내부와 내부를 사용하여 화면 크기를 검색하십시오. 너비와 높이의 비교로 판단하면 너비와 높이는 수직 스크린이며 너비와 높이는 수평 스크린입니다.
코드는 다음과 같습니다.
(function () {var updateorientation = function () {var Orientation = (window.innerwidth> wind window.adeventListener ( 'resize', updateorientation, false);}; wind이런 식으로 브라우저의 화면 회전으로 인한 스타일 변경을 볼 수 있습니다.
두 검출 방법의 조합은 다음과 같습니다.
(function () {var supportorientation = (typeof window.orientation === 'number'&& typeof wind -90 : 오리엔테이션 = 'landscape'; break; default : Orientation = 'portrait'; break;}} eloce {Orientation = (window.innerWidth> window.innerHeight)? '초상화';} htmlnode.setattribute ( 'class', Orientation);}; if (supportorientation) {wind window.adeventListener ( 'resize', updateorientation, false);} updateorientation ();}; window.adeventListener ( 'domContentLoaded', init, false);} ();이 방법을 사용하면 모바일 장치의 성가신 수평 및 수직 스크린 감지를 해결할 수 있습니다.