최근 직장에서 모바일 페이지를 작성했는데, 처음에는 별거 아닌 것 같은 요구 사항이 있었는데, 이전에 작성한 페이지가 APP에 들어가야 했는데요. 가로 방향입니다. 이 페이지를 여는 웹뷰도 가로 화면으로 되어 있습니다. (최신 버전의 APP는 세로 화면 웹뷰로 열립니다.) 원래 저희는 rem 레이아웃을 사용했는데 가로 화면 상태에서는 문제가 없는데 Party A가 가로 화면에서 가로 화면을 사용하길 원합니다. 화면이 열려 있을 때 이 페이지를 세로로 표시하도록 합니다. 따라서 다음과 같은 일련의 작업이 있습니다.
첫 번째는 다음 코드를 사용하여 가로 화면의 상태를 확인하는 것입니다.
function orient() { if(window.orientation == 90 || window.orientation == -90) {//가로 화면//ipad, 아이폰 세로 화면//$(body).attr(class, Landscape); //orientation = 'landscape'; //alert(ipad, iphone 수직 화면; Andriod 수평 화면) $(p).text(가로 화면) } else if(window.orientation) == 0 || window.orientation == 180) {//세로 화면//ipad, iphone 가로 화면// $(body).attr(class, portrait);// 방향 = 'portrait'; //alert(ipad, iphone 가로 화면; Andriod 세로 화면); $(p).text(세로 화면); return false } } //페이지가 로드될 때 호출됨 $(function() { orient(); }); //사용자가 화면 방향을 변경할 때 호출됩니다. $(window).on('orientationchange', function(e) { orient(); });휴대폰의 방향을 모니터링하는 것입니다. 하지만 앱이 가로로 열려 있기 때문에 일반적으로 이를 감지하는 것이 불가능하며, 이를 위한 전제 조건은 휴대폰에 자동 회전이 켜져 있어야 한다는 것입니다. 그래서 위의 방법은 포기했습니다.
스마트한 방법이 포기되었기 때문에 가장 저렴한 방법은 화면의 너비와 높이를 모니터링하는 것입니다. 높이가 너비보다 크면 기본적으로 전화기의 세로 화면 상태가 적용됩니다. 너비가 높이보다 크면 전화기가 가로 화면 상태인 것으로 간주됩니다. (물론 이것도 한계가 있지만, 새로운 앱이 가로, 세로 화면 문제를 해결한 점을 고려하면 여기서는 그냥 하도록 하겠습니다.) 화면이 세로 모드일 때는 아무것도 할 필요가 없습니다. 하지만 가로 모드에서는 페이지를 90도 회전해야 합니다. 더 이상 고민하지 않고 코드를 직접 살펴보겠습니다.
//CSS3 회전을 사용하여 루트 컨테이너를 시계 반대 방향으로 90도 회전하여 사용자가 수직으로 표시하도록 합니다. var detectorOrient = function() { var width = document.documentElement.clientWidth, height = document.documentElement.clientHeight, //$wrapper = document.getElementsByTagName(body)[0], $wrapper = document.getElementById(vue), style = if(width <= height) { // 가로 화면 // 스타일 += width: + width + px;; // 회전 후 너비와 높이 전환에 주의 // style += height: + height + px;;// style += -webkit- 변환: 회전(0); 변환: 회전(0);;// 스타일 += -webkit-변환-원산지: 0 0;;// 스타일 += 변환-원산지: 0 0;; 글꼴 크기 : + (너비 * 100 / 1125) + px; var html_doc = document.getElementsByTagName(html)[0]; html_doc.style.cssText = 글꼴 크기: + (너비 * 100 / 1125) + px } else { // 세로 스타일 + = 너비: + 높이 + px;; 스타일 += 최소 높이: + 너비 + px;; -webkit-transform: 회전(-90deg); 변환: 회전(-90deg);; // 회전 중간점 스타일 처리에 주의하세요. += -webkit-transform-origin: + 높이 / 2 + px + (높이 / 2) + px;; 스타일 += 변형 원본: + 높이 / 2 + px + (높이 / 2) + px //스타일 += 글꼴 크기: + 높이 * 100 / 1125 + px;; //$(html).css({font-size:(height * 100 / 1125),overflow-y:hidden}); var html_doc = document.getElementsByTagName(html)[0]; style.cssText = 글꼴 크기: + 높이 * 100 / 1125 + px + Overflow-y:+hidden;+height:+height+px;; 스타일 += Overflow-y: add_tab(); $wrapper.style.cssText = 스타일 } }window.onresize = detectorOrient; ;function add_tab(){ var clone_tab = $(footer).clone(); $(footer).remove(); clone_tab.css({transform:rotate(-90deg),transform-origin:top right}) $(body).append(clone_tab); clone_tab.css({position:fixed,right:1.77rem,bottom:4rem,left :자동,상단:0,너비:11.25rem,높이:1.77rem})}이 코드는 프론트엔드 인력에게는 어렵지 않다고 생각하는데, 세 가지 주의할 점이 있습니다.
첫 번째 요점:
처음에는 편의상 전체 HTML을 직접 회전시켰습니다. 이때 페이지 내 고정된 위치 요소의 위치 지정이 작동하지 않는 문제가 있습니다. 탭 스위치. 하단) 이를 변경해야 합니다. 상위 요소를 회전하면 하위 요소가 작동하지 않으므로 상위 요소를 회전할 필요가 없으며 해당 형제 요소를 직접 회전하면 됩니다. 여기서는 #vue라는 요소를 회전합니다. 내 페이지의 다른 모든 콘텐츠가 이 div에 있기 때문입니다. 그래서 방금 요소를 회전시켰습니다. 그러면 이때 포지셔닝을 사용할 수는 있는데 스타일이 잘못되어 내 add_tab 함수에서 이 요소의 크기와 스타일을 조정하여 화면 오른쪽, 즉 세로 방향으로 정상적으로 표시될 수 있도록 했습니다. 모드, 화면 하단.
두 번째 요점:
두 번째로 주의할 점은 rem 레이아웃을 사용하기 때문에 html의 글꼴 크기를 변경하게 되는데 이때 회전하면 너비가 높이가 되고 높이가 너비가 되므로 주의하세요. 루트 디렉토리의 글꼴 크기를 계산하려면 높이를 사용해야 합니다.
세 번째 요점:
세 번째 점은 프로그램에서 주의해야 할 점입니다. 기본 회전 중심은 선택한 요소의 중심점입니다. 이제 회전 중심점을 변경하고 싶습니다. 회전 후에는 HTML을 Overflow-y:hidden해야 합니다. 그렇지 않으면 불필요한 스크롤이 발생합니다.
이 경우 기본적으로 전체 페이지가 회전되며 하단에 고정된 위치의 요소가 다시 위치 지정됩니다. 다행스럽게도 우리가 사용하는 팝업창은layui의 팝업창인데, 팝업창을 90도 회전시킬 수 있습니다.
ps: 드디어 해결할 수 없는 문제를 발견했습니다. 페이지가 충분히 길어졌을 때, 즉 스크롤바가 있을 때 팝업창이 나온 후 그 뒤로 마스크 레이어를 슬라이드하면 다음이 발생합니다. 페이지가 위로 슬라이드됩니다. 위의 글은 고정 위치 지정을 이용하면 해결이 되지만 회전 때문에 실패해서 좋은 방법이 없습니다. 세로 모드에서는 문제가 없습니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.