iOS 8은 "minimal-ui"뷰포트 속성을 제거했습니다. 다른 "소프트 풀 스크린"솔루션이 있습니까?

191

(이는 여러 부분으로 구성된 질문이므로 시나리오를 요약하기 위해 최선을 다할 것입니다.)

현재 사용자가 탭 콘텐츠 사이를 스 와이프하고 각 탭 콘텐츠 내부에서 세로로 스크롤 할 수있는 반응 형 웹 앱 (뉴스 리더)을 구축하고 있습니다.

문제에 대한 일반적인 접근법은 래퍼 가지고있다 div브라우저 뷰포트 세트를 채우기 overflow에 hidden또는 auto후 스크롤 수평 및 / 또는 수직으로 내부.

이 방법은 훌륭하지만 한 가지 주요 단점이 있습니다. 문서의 높이는 브라우저 뷰포트와 정확히 동일하므로 모바일 브라우저는 주소 표시 줄 / 탐색 메뉴를 숨기지 않습니다 .

있다 수많은 해킹 및 뷰포트 속성 보다 화면이 부동산을 취득 할 수있게, 그러나 아무도는 것만 큼 효과가 없다 minimal-ui(아이폰 OS 7.1에 도입이).

어제 iOS 8 베타 4가 minimal-ui모바일 사파리에서 제거되었다는 소식이 전해졌습니다 ( iOS 8 릴리스 노트의 웹킷 섹션 참조 ).

Q1. 모바일 사파리에서 주소 표시 줄을 숨길 수 있습니까?

우리가 아는 한, 아이폰 OS 7 더 이상 응답 받는 window.scrollTo해킹, 이것은 우리가 수직 레이아웃이나 사용을 채택하지 않는 한, 작은 화면 공간 살아야 제안한다 mobile-web-app-capable.

Q2. 비슷한 소프트 풀 스크린 경험이 여전히 가능합니까?

하여 부드러운 전체 화면 정말 사용하지 않고 의미 mobile-web-app-capable메타 태그를.

우리의 웹 응용 프로그램은 액세스 할 수 있도록 제작되었으며 기본 브라우저 메뉴를 사용하여 모든 페이지를 북마크하거나 공유 할 수 있습니다. 추가 mobile-web-app-capable하면 사용자가 혼란스럽고 길들이는 메뉴가 홈 화면에 저장 될 때 사용자가 메뉴를 호출하지 못하게합니다.

minimal-ui애플은 다른 접근성 문제 (예 : 메뉴를 활성화하기 위해 탭해야 할 위치를 모르는 사용자)로 인해 메뉴를 제거했을 수도 있지만 메뉴는 기본적으로 숨겨져 있지만 탭으로 액세스 할 수는 있습니다.

Q3. 전체 화면 경험이 문제의 가치가 있습니까?

것으로 보인다 전체 화면 API는 조만간 아이폰 OS에 오는 것이 아니라,이 경우에도, 나는 메뉴가 (같은 안드로이드에 크롬 간다) 접근 유지하는 방법을 볼 수 없습니다.

이 경우 모바일 사파리를 그대로두고 뷰포트 높이를 고려해야합니다 (iPhone 5 +의 경우 460 = 568-108입니다. 여기서 108은 OS 표시 줄, 주소 표시 줄 및 탐색 메뉴를 포함합니다 .iPhone 4 또는 더 오래된, 그것은 372입니다).

기본 앱을 만드는 것 외에도 몇 가지 대안을 듣고 싶습니다.

— 물린
소스

minimal-ui가 일부 앱에 중요한 이유에 대한 자세한 내용 은 stackoverflow.com/questions/18793072/… 를 참조하십시오.

— bitinn

1

우리는 슬쩍 / 스크롤 이벤트가있는 웹 응용 프로그램을 만들려고하지만 iOS8 Beta 4 및 ...에서 onScroll 이벤트를 테스트하면서 iOS 7에서 동일한 문제가 발생했습니다. ios8-scroll-events.heroku.com 그것이 도움이되는지 확실하지 않다면 .. 당신은 당신을 위해 그것을 가지고 있습니다.

— Devin McInnis 2

같은 문제에 부딪쳤다. 아래의 calc () 함수가 유일한 대답이므로 현재 자바 스크립트 "fix"만 있습니다. 더 나은 결정을 알고 있다면이 스레드를 업데이트하십시오. 친애하는.

— A1exandr

86

최소 UI 뷰포트 속성은 더 이상 지원되지 않습니다 iOS 8에서 그러나 minimal-ui 자체는 사라지지 않습니다. 사용자는 "터치-드래그 다운"제스처로 최소 UI를 입력 할 수 있습니다.

보기 상태를 관리하기위한 몇 가지 전제 조건과 장애물이 있습니다. 예를 들어 최소한의 UI가 작동하려면 사용자가 스크롤 할 수있는 충분한 콘텐츠가 있어야합니다. 최소한의 UI가 지속 되려면 페이지로드시 및 방향 변경 후 창 스크롤이 오프셋되어야합니다. 그러나 변수를 사용하여 최소 UI의 크기를 계산하는 방법이 없으므로screen 사용자가 최소 UI에 언제 있는지 알 수 없습니다.

이러한 관찰은 iOS 8 용 Brim – View Manager 개발의 일환으로 조사한 결과입니다 . 최종 구현은 다음과 같은 방식으로 작동합니다.

페이지가로드되면 Brim은 런닝 머신 요소를 만듭니다. 트레드밀 요소는 사용자에게 스크롤 할 공간을 제공하는 데 사용됩니다. 런닝 머신 요소가 있으면 사용자가 최소 UI보기를 입력 할 수 있고 사용자가 페이지를 다시로드하거나 장치 방향을 변경하더라도 계속 유지됩니다. 전체 시간 동안 사용자에게 보이지 않습니다. 이 요소에는 ID가 있습니다brim-treadmill 있습니다.

페이지를로드하거나 방향을 변경 한 후 Brim은 Scream을 사용합니다. 을 페이지가 최소 UI보기에 있는지 감지합니다 (이전에 최소 UI에 있고 다시로드 된 페이지는 컨텐츠 높이가 최소 인 경우 최소 UI에 남아 있음) 뷰포트 높이보다 큼).

페이지가 minimal-ui에있는 경우 Brim은 문서 스크롤을 비활성화합니다 (이는 기본 요소의 내용에 영향을 미치지 않는 안전한 방식으로 수행함). 문서 스크롤을 비활성화하면 위쪽으로 스크롤 할 때 실수로 최소 UI를 벗어나지 않습니다. 원래 iOS 7.1 사양에 따라 상단 막대를 탭하면 나머지 크롬이 다시 나타납니다.

최종 결과는 다음과 같습니다.

iOS 시뮬레이터의 한계.

문서화를 위해 직접 구현을 작성하려는 경우 Scream 을 사용 하여 orientationchange 이벤트 직후 장치가 최소 UI 위치에 있는지 감지 할 수는 없습니다 window. 회전 애니메이션이 종료되었습니다. orientationchangeend 이벤트에 리스너를 연결해야합니다 .

이 프로젝트의 일환으로 비명 과 방향 변경 이 개발되었습니다.

— 가주
소스

3

이것은 더 나은 솔루션이 도착할 때까지 새로운 답변으로 표시된 원래의 답변보다 더 광범위합니다. :)

— bitinn

4

멋져요! 초기 스크롤없이 minimal-ui를 강제 실행할 수 있습니까?

— INT

50

이것은 결코 끝나지 않는 이야기입니다. 나는 HTML의 게임 개발자이고 iOS 7.1의 minimal-ui는 잘 작동했습니다. 앱을 전체 화면으로 실행하고 동시에 화면 하단을 터치 할 수있는 유일한 방법이었습니다. 페이지 스 와이프가있는 솔루션은 훌륭하지만 충분하지 않습니다. (Apple, 게임을 위해 전체 화면 API를 올바르게 구현해야합니다.

— Petr Urban

4

@ 피터 : 나는 더 동의 할 수 없습니다. 이 수정 사항이 7.1에 발표되었을 때 Google은 기본 CTA를 화면 하단에 고정하는 새로운 결제 구매 흐름을 신속하게 출시했습니다. 그것은 매우 "네이티브"하고 매끄 럽습니다. 정확히 문제라고 생각합니다. 당신이 그것에 대해 생각한다면, 웹 앱이 네이티브라고 느끼는 것이 애플의 최선의 관심이 아닙니다. 사실 그들의 앱 스토어 독점과 직접적인 이해 상충입니다. 이것이 의미있는 기능이 수정 된 후 의도적으로 제거 된 유일한 이유 인 IMO입니다. # my2Cents :)

— Jose Browne

2

@PetrUrban 저는 애플이 웹을 통해 서비스를 제공 할 수있는 것보다 게임을 phonegap 앱으로 게시하는 것을 선호한다고 확신합니다. 그들의 사파리 시멘트에 대한 광고 차단제를 허용하려는 최근의 결정은이 아이디어를 뒷받침합니다.

— Patrick Gunderson

20

프로그래밍 방식으로 흉내낼 수있는 방법이 없기 때문에 iOS 주소 표시 줄 높이를 minimal-ui사용 calc()하고 알려진 다른 해결 방법이 있습니다 .

다음 데모 페이지 ( 요점에서 더 자세한 기술 정보도 제공 )는 사용자에게 스크롤하라는 메시지를 표시 한 다음 헤더와 내용이 새 뷰포트를 채우는 소프트 전체 화면 (주소 표시 줄 / 메뉴 숨기기)을 트리거합니다.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Test</title>

    <style>
        html, body {
            height: 100%;
        }

        html {
            background-color: red;
        }

        body {
            background-color: blue;
            margin: 0;
        }

        div.header {
            width: 100%;
            height: 40px;
            background-color: green;
            overflow: hidden;
        }

        div.content {
            height: 100%;
            height: calc(100% - 40px);
            width: 100%;
            background-color: purple;
            overflow: hidden;
        }

        div.cover {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            display: none;
        }

        @media screen and (width: 320px) {
            html {
                height: calc(100% + 72px);
            }

            div.cover {
                display: block;
            }
        }
    </style>
    <script>
        var timeout;

        window.addEventListener('scroll', function(ev) {

            if (timeout) {
                clearTimeout(timeout);
            }

            timeout = setTimeout(function() {

                if (window.scrollY > 0) {
                    var cover = document.querySelector('div.cover');
                    cover.style.display = 'none';
                }

            }, 200);

        });
    </script>
</head>
<body>

    <div class="header">
        <p>header</p>
    </div>
    <div class="content">
        <p>content</p>
    </div>
    <div class="cover">
        <p>scroll to soft fullscreen</p>
    </div>

</body>
</html>

— 물린
소스

10

minimal-ui에 작별 인사를하십시오 (현재)

사실, minimal-ui유용하고 해로울 수 있으며, 트레이드 오프가 이제 더 크고 새로운 iPhone을 선호하는 균형을 유지한다고 가정합니다.

HTML5 앱의 js 프레임 워크로 작업하는 동안 문제를 해결했습니다. 각각의 결점을 가진 여러 가지 해결책을 시도한 후, 나는 6 이전의 iPhone에서 공간이 손실되었다는 점을 고려하기 위해 항복했습니다.

요컨대, 나는 어떤 형태의 minimal-ui도 막았 습니다. 적어도 내 화면 높이는 항상 같으며 앱의 실제 공간을 항상 알고 있습니다.

시간의 도움으로 충분한 사용자가 더 많은 공간을 확보하게됩니다.

편집하다

내가 어떻게

이것은 데모 목적으로 약간 단순화되었지만 귀하에게 도움이됩니다. 메인 컨테이너가 있다고 가정

html, body, #main {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.view {
  width: 100%;
  height: 100%;
  overflow: scroll;
}

그때:

그런 다음 js #main를 사용하여의 높이를 창의 사용 가능한 높이로 설정했습니다. 또한 iOS 및 Android에서 발견되는 다른 스크롤 버그를 처리하는 데 도움이됩니다. 또한 업데이트 방법을 다루어야한다는 것을 의미합니다.
스크롤 경계에 도달하면 오버 스크롤을 차단합니다. 이것은 내 코드에서 좀 더 깊이 있지만 기본 기능에 대한 이 답변 의 원칙을 따를 수 있다고 생각합니다 . 약간 깜빡 일 수 있지만 작업을 수행 할 것입니다.

데모보기 (iPhone에서)

참고 사항 :이 응용 프로그램은 내부 라우팅을 사용하여 해시 된 주소로 북마크 할 수 있지만 iOS 사용자에게 집에 추가하라는 메시지를 추가했습니다. 이런 식으로 충성도와 재 방문자가 도움이된다고 생각합니다.

— 프란체스코 프라 포르 티
소스

minimal-ui를 비활성화하는 것은 나에게 매우 합리적입니다. 그렇게하는 방법에 대한 간단한 설명을 포함하십시오!

— István Pálinkás

네 말이 맞아, 나는 약간의 사용법을 추가했다. 다른 많은 방법들이 효과가 있습니다.

— Francesco Frapporti

1

내 아이폰 5에 따르면, 데모는 iOS8에서 작동하지 않습니다.

— dmr07

알려 주셔서 감사합니다. 이전에 업데이트되었으므로 업데이트해야합니다. 당신은 사파리에 있습니까? 정확히 작동하지 않는 것은 무엇을 의미합니까?

— Francesco Frapporti

7

이 문제를 해결하는 가장 쉬운 방법은 사용자 에이전트가 iphone 인 모든 요청에 대해 본문 및 HTML 요소의 높이를 100.1 %로 설정하는 것입니다. 이것은 가로 모드에서만 작동하지만 필요한 전부입니다.

html.iphone, 
html.iphone body { height: 100.1%; }

https://www.360jungle.com/virtual-tour/25 에서 확인 하십시오.

— 스티븐 가사 이드
소스

감사합니다 @Stephen. 신장 : 100.1 %가 도움이되었습니다. 그러나 iPhone (iOS 11.1.1) Safari에서 360jungle.com/virtual-tour/25 를 열고 하단의 버튼을 클릭하면 주소와 도구 모음이 나타납니다. 버튼이 디스플레이의 끝에 너무 가깝기 때문입니다. 모바일 모드에서 다른 곳으로 옮기는 것이 좋습니다.

— Téwa

2

여기서 근본적인 문제는 내용이 뷰포트와 같거나 작은 경우 iOS8 사파리가 아래로 스크롤 할 때 주소 표시 줄을 숨기지 않는 것 같습니다.

이미 알았 듯이 맨 아래에 패딩을 추가하면이 문제가 해결됩니다.

html {
    /* enough space to scroll up to get fullscreen on iOS8 */
    padding-bottom: 80px;
}

// sort of emulate safari's "bounce back to top" scroll
window.addEventListener('scroll', function(ev) {
    // avoids scrolling when the focused element is e.g. an input
    if (
        !document.activeElement
        || document.activeElement === document.body
    ) {
        document.body.scrollIntoViewIfNeeded(true);
    }
});

위의 CSS는 조건부로 적용해야합니다 (예 : UA 스니핑으로 gt-ios8클래스 추가) <html>.

— 면도칼
소스

1

이 JS는 정확히 무엇을합니까?

— 벤 싱클레어

를 참조하는 scrollIntoViewIfNeeded경우 이는 비표준 파생 scrollIntoView( developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView )입니다. 이름에서 알 수 있듯이 메서드는 요소를 뷰로 스크롤합니다. true매개 변수는 뷰를 요소의 상단에 정렬하도록 말합니다. 이로 인해 스크롤을 방해 할 수 있습니다. 그러나 구현에 결함이 있습니다.

— Gajus

1

의견을 말하고 / 부분적으로 대답하고 / 공유하고 싶습니다. 나는 다가오는 대규모 프로젝트에 overflow-y : scroll 기술을 사용하고 있습니다. 그것을 사용하면 두 가지 중요한 장점이 있습니다.

a) 화면 하단의 작업 버튼이있는 서랍을 사용할 수 있습니다. 문서가 스크롤되고 하단 표시 줄이 사라지면 화면 하단에있는 버튼을 누르면 하단 표시 줄이 나타나고 클릭 할 수 있습니다. 또한이 작업 방식으로 맨 아래쪽에 버튼이있는 모달에 문제가 발생합니다.

b) 오버플로 된 요소를 사용할 때 주요 CSS 변경의 경우 다시 칠하는 것은 볼 수있는 화면의 것만 다시 칠합니다. 이것은 자바 스크립트를 사용하여 여러 요소의 CSS를 즉시 변경할 때 성능을 크게 향상시킵니다. 예를 들어 20 개의 요소 목록이 있고 다시 칠해야하는 요소가 오버플로 된 요소에서 화면에 표시되는 경우 요소 중 두 개만 다시 그려지고 스크롤 할 때 나머지는 다시 그립니다. 그것 없이는 20 개의 요소가 모두 다시 그려집니다.

.. 물론 프로젝트와 내가 언급 한 기능이 필요한 경우에 따라 다릅니다. Google은 a)에서 설명한 기능을 사용하기 위해 gmail에 오버플로 요소를 사용합니다. Imo, 구형 iPhone의 작은 높이 (372px)를 고려하더라도 가치가 있습니다.

— 스쿠터
소스

1

iOS 11에서 제대로 작동하지 않은 ( https://gist.github.com/bitinn/1700068a276fb29740a7 ) 작업의 도움과 함께 아래 예제와 같은 것을 사용하는 것이 가능합니다 .

iOS 11.03에서 작동하는 수정 된 코드는 다음과 같습니다.

키는 BODY에 약간의 크기를 추가하여 브라우저가 스크롤 할 수 있도록합니다. 예 : height : calc (100 % + 40px);

아래의 전체 샘플 및 브라우저에서 볼 수있는 링크 (테스트하십시오!)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeHots iOS WebApp Minimal UI via Scroll Test</title>

    <style>
        html, body {
            height: 100%;
        }
        html {
            background-color: red;
        }
        body {
            background-color: blue;
            /* important to allow page to scroll */
            height: calc(100% + 40px);
            margin: 0;
        }
        div.header {
            width: 100%;
            height: 40px;
            background-color: green;
            overflow: hidden;
        }
        div.content {
            height: 100%;
            height: calc(100% - 40px);
            width: 100%;
            background-color: purple;
            overflow: hidden;
        }
        div.cover {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            display: none;
        }
        @media screen and (width: 320px) {
            html {
                height: calc(100% + 72px);
            }
            div.cover {
                display: block;
            }
        }
    </style>
    <script>
        var timeout;

        function interceptTouchMove(){
            // and disable the touchmove features 
            window.addEventListener("touchmove", (event)=>{
                if (!event.target.classList.contains('scrollable')) {
                    // no more scrolling
                    event.preventDefault();
                }
            }, false); 
        }

        function scrollDetect(event){
            // wait for the result to settle
            if( timeout ) clearTimeout(timeout);

            timeout = setTimeout(function() {
                console.log( 'scrolled up detected..' );
                if (window.scrollY > 35) {
                    console.log( ' .. moved up enough to go into minimal UI mode. cover off and locking touchmove!');
                    // hide the fixed scroll-cover
                    var cover = document.querySelector('div.cover');
                    cover.style.display = 'none';

                    // push back down to designated start-point. (as it sometimes overscrolls (this is jQuery implementation I used))
                    window.scrollY = 40;

                    // and disable the touchmove features 
                    interceptTouchMove();

                    // turn off scroll checker
                    window.removeEventListener('scroll', scrollDetect );                
                }
            }, 200);            
        }

        // listen to scroll to know when in minimal-ui mode.
        window.addEventListener('scroll', scrollDetect, false );
    </script>
</head>
<body>

    <div class="header">
        <p>header zone</p>
    </div>
    <div class="content">
        <p>content</p>
    </div>
    <div class="cover">
        <p>scroll to soft fullscreen</p>
    </div>

</body>

전체 예제 링크 : https://repos.codehot.tech/misc/ios-webapp-example2.html

— 코드 동결
소스

1

iOS와 Android에서 웹 응용 프로그램을 전체 화면으로 실행하는 것이 가능 하며 PWA라고하며 많은 노력을 기울인 후에이 문제를 해결할 수있는 유일한 방법이었습니다.

PWA는 놓치지 말아야 할 여러 가지 흥미로운 개발 옵션을 엽니 다. 나는 이미 부부를 만들었습니다.이 공개 및 개인 입찰자 매뉴얼 디자이너 (스페인어)를 확인하십시오. 다음은 CosmicJS 사이트의 영어 설명입니다.

— 가나
소스

-3

iOS 용 웹 디자인을 수행하지는 않았지만 WWDC 세션 및 설명서, Mobile Safari의 검색 표시 줄 및 OS의 탐색 표시 줄에서 본 내용에서 더 많은 내용을 표시하도록 자동으로 크기가 조정되고 축소됩니다.

iPhone의 Safari에서이를 테스트하고 페이지에서 더 많은 내용을보기 위해 아래로 스크롤하면 탐색 / 검색 막대가 자동으로 숨겨집니다.

주소 표시 줄 / 탐색 모음을 그대로두고 전체 화면 환경을 만들지 않는 것이 가장 좋습니다. 애플이 곧 그렇게하는 것을 보지 못합니다. 그리고 주소 표시 줄이 표시되거나 숨겨 질 때 자동으로 제어되지 않습니다.

물론, 특히 iPhone 4 또는 4S에서 화면 공간을 잃어 버리고 있지만 베타 4의 대안은없는 것 같습니다.

— 아이 펠리
소스

1

iOS7 + 의이 기능을 알고 있었지만 위의 설명을 참조하십시오. 문서의 높이가 브라우저 뷰포트와 정확히 동일하므로 모바일 브라우저는 문서 수준에서 스크롤이 발생하지 않으므로 주소 표시 줄 / 탐색 메뉴를 숨기지 않습니다 .

— bitinn

1

베타 4가 해당 기능을 제거했기 때문에 이는 제한 사항 일 수 있습니다. Apple이 주소 표시 줄을 자동으로 제어하고 개발자가 액세스 할 수 없도록 할 가능성이 있습니다.

— iFeli

8

I haven't done web design for iOS-웹 디자인을 수행하는 경우 모든 플랫폼에 대해 웹 디자인을 수행하십시오. 웹은 모든 플랫폼에 있기 때문에.

— ProblemsOfSumit

4

@ Sumit 웹 작업은 보편적이지만 각 브라우저와 기본 프레임 워크에는 특정 CSS 속성이 있습니다. 따라서 Chrome에는 Safari 및 FireFox에서 사용할 수없는 속성이있을 수 있으며 그 반대도 마찬가지입니다.

— iFeli