얼마 전, 나는 H5 프로젝트를 수행했으며 수평 및 수직 스크린이 변경 될 때 약간의 처리를해야했습니다. 수평 및 수직 스크린의 변화를 모니터링하기 위해 오리엔테이션 체인지를 사용해야한다는 것은 의심의 여지가 없습니다.
Plan 1:
// 오리엔테이션 changesswindow.AdDeventListener ( "OrientationChange", function (event) {// event.orientation | screen.orientation.angle은 0 | 180, 90 | -90 Degrees}, false와 같다);코드가 추가 된 후 다양한 호환성 문제가 있습니다. 호환성 문제는 여기서 두 곳에서 발생합니다.
오리엔테이션 변경
event.orientation | screen.orientation.angle
다음은 OrientationChange 이벤트의 호환성입니다.
다음은 화면의 호환성입니다.
Plan 2:위의 계획은 작동하지 않으므로 다른 방법 만 수행 할 수 있습니다. Google을 통해 Resize (Window.inner/Outerwidth, Window.inner/Outerheight)를 통해 달성 할 수 있음을 알게됩니다.
window.adeventListener ( "resize", function (event) {var Orientation = (wind이 솔루션은 기본적으로 대부분의 프로젝트의 요구를 충족하지만 여전히 몇 가지 단점이 있습니다.
창 크기가 변경되는 한 크기 조정 이벤트가 지속적으로 트리거됩니다. settimeout을 사용하여 최적화 할 수 있습니다
수평 및 수직 화면을 모니터링 해야하는 여러 장소가있는 경우 여러 Windows.AdDeventListener ( "Resize", Function (Event) {...}) 등록해야합니다. 구독 및 게시 모드를 통해 개선 할 수 있습니까? 수평 및 수직 스크린의 변경 사항을 모니터링하기 위해 크기 조정 만 등록하고 수평 및 수직 변경이 발생하는 한 구독 객체에 알림을 게시하십시오. 수평 및 수직 스크린을 모니터링 해야하는 다른 장소는 구독 일뿐입니다.
키 코드는 다음과 같습니다.
var resizecb = function () {if (win.innerWidth> win.innerHeight) {// 심판 meta.init = 'landscape'; 메타 .current = '풍경'; } else {meta.init = '초상화'; Meta.current = '초상화'; } return function () {if (win.innerWidth> win.innerHeight) {if (meta.current! == 'landscape') {meta.current = 'landscape'; event.trigger ( '__ OrientationChange__', meta); }} else {if (meta.current! == 'portrait') {meta.current = 'Portrait'; event.trigger ( '__ OrientationChange__', meta); }}}}}}}} ();전체 코드가 여기에서 클릭됩니다
Plan 3:
그러나 개인적으로 Window.innerWidth> Window.innerHeight의 구현은 일종의 의사 탐지라고 생각합니다. 브라우저를 통해 감지를 달성 할 수 있습니까? 이것은 CSS3@미디어 미디어 쿼리를 기반으로합니다.
다음과 같이 @Media 호환성 :
위 그림에서 볼 수 있듯이 모바일 브라우저는 CSS3 미디어를 지원합니다.
구현 아이디어 :
수평 및 수직 스크린 상태를 식별하는 특정 CSS 스타일 생성
JS를 통해 CSS 코드를 페이지에 주입하십시오
크기 조정 콜백 함수는 수평 및 수직 화면의 상태를 가져옵니다.
여기서는 감지 스타일 속성으로 <html> </html>의 노드 글꼴을 선택합니다. 이유는 다음과 같습니다.
<html> </html> 주로 리플 로우와 리 페인트를 피하려면 선택하십시오
Font-Family 스타일은 주로 Font-Family가 다음과 같은 특성을 가지고 있기 때문입니다.
이러한 방식으로, 우리는 수평 및 수직 화면의 상태를 식별하기 위해 특정 로고를 지정할 수 있지만, 지정된 로고는 다른 글꼴 앞에 배치되어야하므로 HMTL 글꼴 변경이 발생하지 않도록해야합니다.
키 코드는 다음과 같습니다.
// callback var resizecb = function () {var hstyle = win.getComputedStyle (html, null), ffstr = hstyle [ 'font-family'], pStr = "portrait," + ffstr = "lackscape," + ffStr, // splicing css csssts = '@Media (paptoig) ^ .orientation {font-family : ' + pstr +';}} @media (오리엔테이션 : landscape) {.Orientation {font-family : ' + lstr +';}} '; //로드 스타일로드 스타일 스트링 (CSSSTR); // 클래스 추가 html.className = 'Orientation' + html.className; if (hstyle [ 'font-family'] === pstr) {// 심판 meta.init = '초상화'; Meta.current = '초상화'; } else {meta.init = 'landscape'; 메타 .current = '풍경'; } return function () {if (hstyle [ 'font-family'] === pstr) {if (meta.current! == 'portrait') {meta.current = 'portrait'; event.trigger ( '__ OrientationChange__', meta); }} else {if (meta.current! == 'landscape') {meta.current = 'landscape'; event.trigger ( '__ OrientationChange__', meta); }}}}}}} ();전체 코드가 여기에서 클릭됩니다
테스트 결과
초상화 효과 :
조경 효과 :
Plan 4:
당신은 그것을 향상시킬 수 있습니다. OrientationChange를 지원할 때는 기본 OrientationChange를 사용하십시오. 그렇지 않은 경우 솔루션 3을 사용하십시오.
키 코드는 다음과 같습니다.
// OrientationChange 이벤트가 지원되는지 Isorientation = (Window의 'Orientation'에서 'Window의'Orientation '&&'onorientationChange '); // CallbackVar OrientationCB = function (e) {if (win.orientation == 180 || win.orientation === 0) {meta.init'; Meta.current = '초상화'; } if (win.orientation === 90 || win.orientation === -90) {meta.init = 'landscape'; 메타 .current = '풍경'; } return function () {if (win.orientation === 180 || win.orientation === 0) {meta.current = 'portrait'; } if (win.orientation === 90 || win.orientation === -90) {meta.current = 'landscape'; } event.trigger (EventType, Meta); }}; var Callback = Isorientation? OrientationCb () : (function () {resizecb (); return function () {timer && win.cleartimeout (timer); timer = win.settimeout (resizecb, 300);}} (); // win.addeventListener (isorientation? 'resize, false);전체 코드가 여기에서 클릭됩니다
Plan 5:
현재 위의 솔루션은 모두 맞춤형 구독 및 게시 이벤트 모드를 통해 구현됩니다. 여기서 방향은 브라우저의 이벤트 메커니즘을 기반으로 시뮬레이션 할 수 있습니다. 즉, OrientationChange의 비 호환성을 수정하십시오.
키 코드는 다음과 같습니다.
var eventType = 'OrientationChange'; // trigger avatiel QuantationChangeVar fire = function () {var e; if (document.createevent) {e = document.createevent ( 'htmlevents'); e.initevent (eventType, true, false); win.dispatchevent (e); } else {e = document.createeventObject (); e.eventType = EventType; if (win [eventtype]) {win [eventtype] (); } else if (win [ 'on' + eventType]) {win [ 'on' + eventType] (); } else {win.fireevent (EventType, e); }}}전체 코드가 여기에서 클릭됩니다
위의 5 가지 솔루션을 통해 모바일 터미널에서 수평 및 수직 스크린 감지에 대한 추가 이해가 있습니다. 나는 내가 그들을 직접 경험 한 후에 나 자신에 대해 글을 쓴 이유 만 알고있다. 또한 기사의 이유를 모두 기록하여 모든 사람에게 도움이되기를 바라고 있습니다. 5 개의 솔루션이 최종 오리엔테이션 변경 -Fix로 진화 한 후 GitHub 주소 : https://github.com/zhansingsong/orientationchange-fix
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.