(이는 여러 부분으로 구성된 질문이므로 시나리오를 요약하기 위해 최선을 다할 것입니다.)
현재 사용자가 탭 콘텐츠 사이를 스 와이프하고 각 탭 콘텐츠 내부에서 세로로 스크롤 할 수있는 반응 형 웹 앱 (뉴스 리더)을 구축하고 있습니다.
문제에 대한 일반적인 접근법은 래퍼 가지고있다 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입니다).
기본 앱을 만드는 것 외에도 몇 가지 대안을 듣고 싶습니다.
답변
최소 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 사양에 따라 상단 막대를 탭하면 나머지 크롬이 다시 나타납니다.
최종 결과는 다음과 같습니다.
문서화를 위해 직접 구현을 작성하려는 경우 Scream 을 사용 하여 orientationchange 이벤트 직후 장치가 최소 UI 위치에 있는지 감지 할 수는 없습니다 window. 회전 애니메이션이 종료되었습니다. orientationchangeend 이벤트에 리스너를 연결해야합니다 .
답변
프로그래밍 방식으로 흉내낼 수있는 방법이 없기 때문에 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>답변
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 사용자에게 집에 추가하라는 메시지를 추가했습니다. 이런 식으로 충성도와 재 방문자가 도움이된다고 생각합니다.
답변
이 문제를 해결하는 가장 쉬운 방법은 사용자 에이전트가 iphone 인 모든 요청에 대해 본문 및 HTML 요소의 높이를 100.1 %로 설정하는 것입니다. 이것은 가로 모드에서만 작동하지만 필요한 전부입니다.
html.iphone,
html.iphone body { height: 100.1%; }답변
여기서 근본적인 문제는 내용이 뷰포트와 같거나 작은 경우 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>.
답변
의견을 말하고 / 부분적으로 대답하고 / 공유하고 싶습니다. 나는 다가오는 대규모 프로젝트에 overflow-y : scroll 기술을 사용하고 있습니다. 그것을 사용하면 두 가지 중요한 장점이 있습니다.
a) 화면 하단의 작업 버튼이있는 서랍을 사용할 수 있습니다. 문서가 스크롤되고 하단 표시 줄이 사라지면 화면 하단에있는 버튼을 누르면 하단 표시 줄이 나타나고 클릭 할 수 있습니다. 또한이 작업 방식으로 맨 아래쪽에 버튼이있는 모달에 문제가 발생합니다.
b) 오버플로 된 요소를 사용할 때 주요 CSS 변경의 경우 다시 칠하는 것은 볼 수있는 화면의 것만 다시 칠합니다. 이것은 자바 스크립트를 사용하여 여러 요소의 CSS를 즉시 변경할 때 성능을 크게 향상시킵니다. 예를 들어 20 개의 요소 목록이 있고 다시 칠해야하는 요소가 오버플로 된 요소에서 화면에 표시되는 경우 요소 중 두 개만 다시 그려지고 스크롤 할 때 나머지는 다시 그립니다. 그것 없이는 20 개의 요소가 모두 다시 그려집니다.
.. 물론 프로젝트와 내가 언급 한 기능이 필요한 경우에 따라 다릅니다. Google은 a)에서 설명한 기능을 사용하기 위해 gmail에 오버플로 요소를 사용합니다. Imo, 구형 iPhone의 작은 높이 (372px)를 고려하더라도 가치가 있습니다.
답변
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
