iOS 7.1을 사용하여 세로에서 가로로 전환 할 때 회색 영역이 표시됩니다. 최소 -ui

Question

웹 응용 프로그램에서 iOS 7.1의 새로운 minimal-ui 기능 (safari fullscreen in iOS 7.1 with minimal-ui meta tag 참조)을 시도했지만 어디에서 문제가 발생하는지 봅니다. 세로에서 가로로 전환하면 하단에 84 픽셀의 높은 회색 영역이 나타납니다. 또한 가로로 전환하면 document.body.scrollTop이 64로 변경됩니다.

당신은 this "Hello World" web app를 사용하여 문제를 볼 수 있습니다 : 나는 아이폰 OS 7.1 아이폰의 레티 나 시뮬레이터에 모바일 사파리에서 응용 프로그램을로드 할 때 http://www.creativepulse.gr/media/blog/2014/20140123-hello-world/example.html

은, 모든 세로 모드에서 괜찮습니다. 그러나 가로로 전환하면 회색 영역이 즉시 나타납니다.

이 문제를 해결하는 좋은 방법은 무엇입니까?

Answer 1

페이지가 렌더링 된 후 맨 위로 스크롤하면 도움이되었습니다. 그것은 어떻게 든 다시 렌더링이 발생하고 회색 상자 그러나 내가 정확히 사파리는 내부적으로 무엇을 설명 할 수 없다, 사라 :

window.scrollTo(0, 0); 

Answer 2

나는 이것을 행운으로 해결하려고 잠시 노력했다. 나는 마침내 시험을하기로 결정했습니다.

1. minimal-ui 메타 태그를 사용하여 새 HTML 문서를 만들었습니다.
2. 문서의 본문을 비워 둡니다 (HTML 태그 없음). 스타일이 없습니다.

테스트 결과 여전히 문제가 발생합니다.

내가 결론을 내릴 수있는 유일한 이유는 이것이 IOS 7.1의 버그이므로 Apple에 버그 보고서를 제출했습니다. BUG # : 16335579으로보고되었습니다.

Mr. kraftwer1's solution은 나를 위해 일했습니다 (해킹이지만 Apple이 해결할 때까지해야합니다). 즉, orientationChange 이후에 ... window.scrollTo(0, 0);이 추가됩니다.

마지막으로,이 문제에 대한 추가 버그 보고서를 제출하면 Apple이 대기열에서 우선 순위를 높일 것이라고 언급하고자합니다.

Answer 3

저도 같은 문제를 피하려고이 글을 읽고 있었다 그리고 그렇게 할 수있는 또 다른 방법을 찾아 냈다.

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

다음 :

먼저 장치가 (가로 또는 세로 인 경우도 우리가 나중에 감지 할 수있다)으로 회전하는 경우의 그래서 난 JS에서 mediaqueries을 점검하기위한 VAR를 설정하는거야 할 감지하자 우리는 어떤 변화가 있는지 듣고 뷰포트 다시 작성할 수 있습니다 :

mql.addListener(function(m) { 
     $('meta[name="viewport"]').attr("content","width=device-width, user-scalable=no, maximum-scale=1.2"); // No matter if is landscape or portrait 
    }); 

을 아니면 더 구체적으로 가로/세로 다른 뭔가를 게재 할 수

mql.addListener(function(m) { 
     if(m.matches) { 
      $('meta[name="viewport"]').attr("content","width=device-width, user-scalable=no, maximum-scale=1.2"); // Portrait 
     } 
     else { 
      $('meta[name="viewport"]').attr("content","width=device-width, user-scalable=no, maximum-scale=1.0"); // Landscape 
     } 
    }); 

도움이 될 수 있기를 바랍니다.

Answer 4

문제는 실제로 iOS 7.0 및 7.1에서 버그로 보입니다. 내가 가로로 장치를 사용할 때만 재현 할 수있었습니다.

내가 아는 세 가지 상황에서 발생하며 모든 경우에 window.scrollTo(0, 0) 해킹으로 해결됩니다.

1. 장치를 가로 방향으로 회전시킬 때. 다음과 같이 해결할 수 있습니다 :

   $(window).on('orientationchange', function() { 
       window.scrollTo(0, 0); 
   }); 
   

2. 문서 맨 아래에서 끌 때. scroll 이벤트를 처리하여 해결 : 포커스 요소에 대한

   $(window).on('scroll', function() { 
       var focusedElement; 
   
       if ($(document).scrollTop() !== 0) { 
       focusedElement = $(':focus'); 
       if (!(focusedElement.is('input') || focusedElement.is('textarea'))) window.scrollTo(0, 0); 
       } 
   }); 
   

   예외는 화면 키보드가 열릴 때 때문에 필요하다, 또한 창에 스크롤 이벤트를 트리거합니다. - 다음 키보드 설정을 닫을 때

3. , 모든 요소가 포커스를 잃을 :이 문제부터

   formLayer.on('blur', 'input, textarea', function() { 
       if (!$(':focus').length) window.scrollTo(0, 0); 
   }); 
   

는 아이폰 OS 버전 7.0 및 7.1 만 관련, 다음이 해킹을 제한하는 것이 좋습니다 표현 :

var buggyIOS = /\b(?:iPhone|iPod|iPad).*?\bOS 7_[01]/.test(window.navigator.userAgent); 

Answer 5

내가 찾은 가장 좋은 수정 알렉산더 Koleda에 의해 here입니다.

window.addEventListener('scroll', function() { 
    if (document.activeElement === document.body && window.scrollY > 0) { 
     document.body.scrollTop = 0; 
    } 
}, true); 

이렇게하면 아래로 스크롤 할 때 회색 막대가 고정됩니다. window.scrollTo(0,0) 솔루션을 정련

는

Answer 6

, 나는 즉시 호출 함수 표현식을 설명하는 자체에 캡슐화 및 문서 준비 및 창 크기 조정에서 실행 :

(function minimalUiFix() { 
    var fix = function() { 
    window.scrollTo(0,0); 
    }; 

    $(fix); 
    $(window).on('resize.minimal-ui-fix', fix); 
})(); 

장점은 작업과 관련된 모든 코드가 함께 주위에 캡슐화 된 것입니다 그 이유는 함수 이름에 설명되어 있습니다. 이렇게하면 이상한 작업 환경으로 인해 나머지 아름다운 코드가 오염되는 것을 막을 수 있습니다.

많은 일이 있습니다.하지만이 번호는 jsbin에서 사용하고 있습니다.

이 트릭은 나를 위해 트릭을하지 않는 것 같습니다. 이 jsbin을 확인하십시오. 여기에있는 것은 매우 간단합니다 : 전체 화면을 차지해야하는 오버플로 숨겨진 고정 위치 컨테이너. 스크롤링이 불가능해서는 안되지만, 나는 의도하지 않은 스크롤 가능한 공간을 여전히 확보하고있다. 이 트릭은 모두 맨 위로 스크롤됩니다. 실제 문제의 원인이되는 신비한 공간을 없애지는 못합니다.

그러나 준비 및 크기 조정과 함께 스크롤에 수정 사항을 적용하는 것은 주변에서보기 흉한 작업에 가장 가깝게 보입니다.

(function minimalUiFix() { 

    var fix = function() { window.scrollTo(0,0); }; 
    $(fix); 
    $(window).on('resize.minimal-ui-fix', fix); 
    $(window).on('scroll.minimal-ui-fix', fix); 

})(); 

나는이 애플이 모바일 사파리 나 다른 일이 주위에 발견 해결 될 때까지 우리가 희망 할 수있는 최선이라고 생각합니다.

Answer 7

<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui=1, user-scalable=no"> 

나를 제거한 최소 UI 만 제거하십시오.

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">