iOS 8은 "minimal-ui" 뷰포트 속성을 제거했는데, 다른 "소프트 전체 화면" 솔루션이 있습니까?
(여러 부분으로 구성된 질문입니다. 시나리오를 최대한 요약하도록 하겠습니다.)
현재 탭 형식의 콘텐츠 사이를 스와이프하고 각 탭 형식의 콘텐츠 내부를 세로로 스크롤할 수 있는 반응형 웹 앱(뉴스 리더)을 구축하고 있습니다.
있는 입니다.div뷰포트를 " " " " " 을 설정합니다.overflowhidden또는auto그런 다음 수평 및/또는 수직으로 스크롤합니다.
이 방법은 훌륭하지만 한 가지 주요 단점이 있습니다. 문서의 높이가 브라우저 뷰포트와 정확히 같기 때문에 모바일 브라우저는 주소 표시줄/내비게이션 메뉴를 숨기지 않습니다.
더 많은 화면 부동산을 얻을 수 있게 해주는 수많은 해킹과 뷰포트 속성이 있지만, 어떤 것도 그것만큼 효과적이지 않습니다.minimal-ui 7 (iOS 7.1 버전)
어제 iOS 8 베타4가 제거되었다는 소식이 왔습니다.minimal-uiMobile Safari(iOS 8 릴리스 노트의 웹킷 섹션 참조)에서 다음과 같은 문제가 발생했습니다.
Q1. 모바일 사파리에서 주소 표시줄을 숨길 수 있습니까?
우리가 아는 한, iOS 7은 더 이상 응답하지 않습니다.window.scrollTo해킹, 이것은 우리가 수직 레이아웃을 채택하거나 사용하지 않는 한 더 작은 화면 공간으로 살아야 한다는 것을 시사합니다.mobile-web-app-capable.
Q2. 이와 유사한 소프트 풀스크린 환경을 경험할 수 있습니까?
소프트 전체 화면이란 사용하지 않는 것을 의미합니다.mobile-web-app-capable메타 태그
당사의 웹 앱은 액세스가 가능하도록 설계되었으며, 기본 브라우저 메뉴를 사용하여 모든 페이지를 책갈피로 설정하거나 공유할 수 있습니다.추가함으로써mobile-web-app-capable우리는 사용자가 (홈 화면에 저장될 때) 이러한 메뉴를 호출하는 것을 방지하여 사용자를 혼란스럽게 하고 반감을 갖게 합니다.
minimal-uiApple이 다른 접근성 문제(사용자가 메뉴를 활성화할 위치를 모르는 경우 등)로 인해 제거했을 수도 있지만 기본적으로 메뉴를 숨기지만 탭으로 액세스할 수 있는 상태를 유지하는 중간 영역이었습니다.
Q3. 전체 화면 환경은 문제를 해결할 가치가 있습니까?
iOS에 곧 전체 화면 API가 제공되지는 않을 것으로 보이지만, 그렇다고 하더라도 메뉴를 어떻게 액세스할 수 있는지 알 수 없습니다(안드로이드의 Chrome도 마찬가지입니다).
이 경우 모바일 사파리를 그대로 두고 뷰포트 높이를 고려해야 할 수도 있습니다(아이폰 5+의 경우 460 = 568 - 108이며, 108에는 OS 바, 주소 표시줄 및 탐색 메뉴가 포함되어 있으며, 아이폰 4 이상의 경우 372입니다).
네이티브 앱 구축 외에도 몇 가지 대안을 듣고 싶습니다.
minimal-ui 뷰포트 속성은 iOS 8에서 더 이상 지원되지 않습니다.하지만 미니멀UI 자체는 사라지지 않았습니다.사용자는 "터치다운" 제스처로 최소 UI를 입력할 수 있습니다.
보기 상태를 관리하는 데는 몇 가지 전제 조건과 장애물이 있습니다. 예를 들어, 최소 UI가 작동하려면 사용자가 스크롤할 수 있는 충분한 콘텐츠가 있어야 합니다. 최소 UI가 지속되려면 페이지 로드 시와 방향 변경 후에 창 스크롤이 오프셋되어야 합니다.그러나, 다음을 사용하여 최소-의 치수를 계산할 수 있는 방법은 없습니다.screen변수이므로 사용자가 minimal-ui에 있을 때 미리 알 수 있는 방법이 없습니다.
이러한 관찰은 Brim – view manager for iOS 8을 개발하는 과정에서 이루어진 연구 결과입니다.엔드 구현은 다음과 같은 방식으로 작동합니다.
페이지가 로드되면 Brim은 트레드밀 요소를 만듭니다.트레드밀 요소는 사용자에게 스크롤할 공간을 제공하는 데 사용됩니다.트레드밀 요소가 있으면 사용자가 최소 UI 보기를 입력할 수 있으며 사용자가 페이지를 다시 로드하거나 장치 방향을 변경해도 계속 표시됩니다.사용자가 계속 볼 수 없습니다.는 ID 이 요 에 ID 가 있니다입니다.
brim-treadmill.페이지를 로드할 때 또는 방향을 변경한 후 Brim은 Scream을 사용하여 페이지가 minimum-ui 뷰에 있는지 여부를 감지합니다(이전에 minimum-ui에 있었고 다시 로드된 페이지는 minimum-ui로 유지됨). 내용 높이가 Viewport 높이보다 클 경우 minimum-ui로 유지됩니다.
페이지가 minimal-ui일 때 Brim은 문서 스크롤을 비활성화합니다(기본 요소의 내용에 영향을 미치지 않는 안전한 방법으로 이 작업을 수행합니다).문서 스크롤을 사용 불가능으로 설정하면 위쪽으로 스크롤할 때 실수로 최소 UI가 떠나는 것을 방지할 수 있습니다.원래 iOS 7.1 사양에 따라 상단 바를 누르면 크롬의 나머지 부분이 다시 나옵니다.
최종 결과는 다음과 같습니다.
문서화를 위해, 그리고 독자적인 구현체를 작성하는 것을 선호하는 경우, 방향 변경 이벤트 직후에 장치가 minimal-ui에 있는지 탐지하기 위해 Scream을 사용할 수 없다는 것에 주목할 필요가 있습니다.window회전 애니메이션이 끝날 때까지 치수가 새 방향을 반영하지 않습니다.오리엔테이션 변경 종료 이벤트에 수신기를 첨부해야 합니다.
스크림 및 방향 전환 엔드는 이 프로젝트의 일부로 개발되었습니다.
모방하는 프로그램적인 방법이 없기 때문입니다.minimal-ui▁using를 사용하여 다른 해결책을 생각해냈습니다.calc()iOS 주소높확인를수있다니습할이줄시표▁and.
다음 데모 페이지(자세한 기술 정보는 여기에서도 확인할 수 있음)에서는 스크롤하라는 메시지가 표시되며, 이 페이지에서 소프트 풀 화면(주소 표시줄/메뉴 숨기기)이 트리거되어 헤더와 컨텐츠가 새 뷰포트를 채웁니다.
<!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유용할 수도 있고 해로울 수도 있고, 저는 이제 트레이드오프가 더 새롭고 더 큰 아이폰에 유리한 또 다른 균형을 가지고 있다고 생각합니다.
저는 HTML5 앱을 위해 제 js 프레임워크를 사용하면서 이 문제를 처리해 왔습니다.각각의 단점을 가지고 많은 해결책을 시도한 후, 저는 6보다 이전에 아이폰에서 공간이 손실된 것을 고려하여 항복했습니다. 상황을 고려할 때, 확실하고 예측 가능한 유일한 행동은 미리 결정된 것이라고 생각합니다.
간단히 말해서, 저는 어떤 형태의 미니멀 UI도 방지하게 되었습니다. 그래서 적어도 제 화면 높이는 항상 같고 여러분은 항상 앱을 위한 실제 공간이 얼마나 있는지 알고 있습니다.
시간의 도움으로, 충분한 사용자들은 더 많은 공간을 갖게 될 것입니다.
편집
사용 방법
데모용으로 조금 단순화되었지만 사용자에게 도움이 될 것입니다.주 컨테이너가 있다고 가정할 때
html, body, #main {
height: 100%;
width: 100%;
overflow: hidden;
}
.view {
width: 100%;
height: 100%;
overflow: scroll;
}
그러면:
그리고 나서 js로, 나는 설정했습니다.
#main의 높이를 창의 사용 가능한 높이로 설정합니다.이것은 또한 iOS와 Android에서 발견되는 다른 스크롤 버그를 처리하는 데 도움이 됩니다.은 또한 그것을 단지 하세요; 는또한업것의다같미음는습과다이니을한는다야해의논.스크롤의 경계에 도달할 때 오버스크롤을 차단합니다.이것은 제 코드에 좀 더 깊이 있지만, 기본적인 기능을 위해서는 이 답변의 원칙을 따르는 것이 좋을 것 같습니다.저는 그것이 약간 흔들릴 수 있다고 생각하지만, 그 일은 할 수 있을 것입니다.
데모 보기(iPhone)
참고로 이 앱도 해시 주소에 내부 라우팅을 사용하기 때문에 북마크할 수 있지만 iOS 사용자에게 집에 추가하라는 메시지를 추가했습니다.저는 이러한 방식이 충성심과 방문객 귀환에 도움이 된다고 생각합니다(그래서 잃어버린 공간이 다시 돌아왔습니다.
이 문제를 해결하기 위해 찾은 가장 쉬운 방법은 사용자 에이전트가 아이폰인 모든 요청에 대해 본문과 HTML 요소의 높이를 100.1%로 설정하는 것이었습니다.이것은 가로 모드에서만 작동하지만, 제게 필요한 것은 그것뿐입니다.
html.iphone,
html.iphone body { height: 100.1%; }
https://www.360jungle.com/virtual-tour/25 에서 확인해 보세요.
여기서 근본적인 문제는 콘텐츠가 뷰포트와 같거나 낮을 경우 iOS8 Safari가 아래로 스크롤할 때 주소 표시줄을 숨기지 않는 것 같습니다.
이미 알고 있듯이, 맨 아래에 패딩을 추가하면 이 문제를 해결할 수 있습니다.
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>.
저는 제 생각을 말하고 싶습니다.저는 다가오는 큰 프로젝트를 위해 오버플로-y:스크롤 기법을 사용하고 있습니다.그것을 사용하는 것은 두 가지 주요 이점이 있습니다.
화면 아래쪽에서 수행 단추가 있는 드로어를 사용할 수 있습니다. 문서가 스크롤되고 아래쪽 표시줄이 사라지면 화면 아래쪽에 있는 단추를 누르면 맨 아래쪽 표시줄이 표시된 다음 클릭할 수 있습니다.또한, 이것이 작동하는 방식은 맨 아래에 버튼이 있는 모델에 문제를 일으킵니다.
오버플로 요소를 사용할 때, 주요 CSS 변경 시 다시 칠해지는 것은 보이는 화면에 있는 것들뿐입니다.이것은 Javascript를 사용하여 여러 요소의 CSS를 즉시 변경할 때 성능이 크게 향상되었습니다.예를 들어, 다시 칠해야 하는 20개 요소 목록이 있고 그 중 2개 요소만 오버플로 요소에 화면에 표시되면 나머지 요소만 다시 칠하고 나머지 요소는 스크롤할 때 다시 칠합니다.그렇지 않으면 20개 요소가 모두 재도색됩니다.
..물론 프로젝트에 따라 다르며, 제가 언급한 기능이 필요한 경우에도 마찬가지입니다.Google은 gmail에 오버플로 요소를 사용하여 a)에서 설명한 기능을 사용합니다.이모, 구형 아이폰의 작은 키(말씀하신 대로 372px)를 고려해도 시간을 들일 가치가 있습니다.
iOS 11에서 제대로 작동하지 않았던 https://gist.github.com/bitinn/1700068a276fb29740a7) 의 작업을 통해 제가 작성한 아래 예시와 같은 것을 사용하면 가능합니다.
여기 iOS 11.03에서 작동하는 수정된 코드가 있습니다, 당신에게 효과가 있었는지 댓글을 달아주세요.
브라우저가 스크롤할 수 있도록 BODY에 일부 크기를 추가하는 것이 핵심입니다. 예: 높이: 계산(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
iOS와 Android 모두에서 전체 화면에서 웹 애플리케이션을 실행할 수 있으며 PWA라고 하며 많은 노력 끝에 이 문제를 해결하는 유일한 방법이었습니다.
PWA는 놓쳐서는 안 되는 개발을 위한 여러 가지 흥미로운 옵션을 엽니다.저는 이미 몇 가지를 만들었습니다. 디자이너를 위한 공개 및 비공개 입찰 설명서(스페인어)를 확인하십시오.그리고 여기 우주 JS 사이트의 영어 설명이 있습니다.
iOS용 웹 디자인을 해본 적은 없지만, WWDC 세션과 문서에서 본 기억에 따르면 모바일 사파리의 검색 창과 OS 전반의 탐색 창은 이제 더 많은 콘텐츠를 표시하기 위해 자동으로 크기가 조정되고 축소됩니다.
iPhone의 Safari에서 이를 테스트할 수 있으며 아래로 스크롤하여 페이지에 더 많은 콘텐츠를 볼 때 탐색/검색 표시줄이 자동으로 숨겨집니다.
주소 표시줄/내비게이션 표시줄을 그대로 두고 전체 화면을 만들지 않는 것이 가장 좋습니다.저는 애플이 곧 그렇게 할 것이라고는 생각하지 않습니다.또한 주소 표시줄이 표시되거나 숨겨지는 시기는 대부분 자동으로 제어되지 않습니다.
물론, 당신은 특히 아이폰 4나 4S에서 화면의 현실성을 잃고 있지만, 베타 4부터는 대안이 없는 것 같습니다.
언급URL : https://stackoverflow.com/questions/24889100/ios-8-removed-minimal-ui-viewport-property-are-there-other-soft-fullscreen
'programing' 카테고리의 다른 글
| 어떻게 당신의 지역 깃 커밋 중 일부만 푸시합니까? (0) | 2023.06.23 |
|---|---|
| 파이썬에서 파일 찾기 (0) | 2023.06.23 |
| 요소별 행렬 곱셈(하다마드 제품)을 numpy로 얻는 방법은 무엇입니까? (0) | 2023.06.23 |
| invoke-customs는 Android 0 --min-api 26부터만 지원됩니다. (0) | 2023.06.23 |
| 이에 사용할 수 없는 구역. (0) | 2023.06.23 |