iOS 8은 "minimal-ui"뷰포트 속성을 제거했습니다. 다른 "소프트 풀 스크린"솔루션이 있습니까?
(이는 여러 부분으로 구성된 질문이므로 시나리오를 요약하기 위해 최선을 다할 것입니다.)
현재 사용자가 탭 콘텐츠 사이를 스 와이프하고 각 탭 콘텐츠 내부에서 세로로 스크롤 할 수있는 반응 형 웹 앱 (뉴스 리더)을 구축하고 있습니다.
문제에 대한 일반적인 접근법은 래퍼 가지고있다 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 뷰포트 속성은 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%; }
https://www.360jungle.com/virtual-tour/25 에서 확인 하십시오.
여기서 근본적인 문제는 내용이 뷰포트와 같거나 작은 경우 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 개의 요소가 모두 다시 그려집니다.
..of course it depends on the project and if you need any of the functionality I mentioned. Google uses overflown elements for gmail to use the functionality I described on a). Imo, it's worth the while, even considering the small height in older iphones (372px as you said).
It IS possible, using something like the below example that I put together with the help of work from (https://gist.github.com/bitinn/1700068a276fb29740a7) that didn't quite work on iOS 11:
Here's the modified code that works on iOS 11.03, please comment if it worked for you.
The key is adding some size to BODY so the browser can scroll, ex: height: calc(100% + 40px);
Full sample below & link to view in your browser (please test!)
<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>
Full example link here: https://repos.codehot.tech/misc/ios-webapp-example2.html
It is possible to get a web application running in full screen in both iOS and Android, it is called a PWA and after mucha hard work, it was the only way around this issue.
PWAs open a number of interesting options for development that should not be missed. I've made a couple already, check out this Public and Private Tender Manual For Designers (Spanish). And here is an English explanation from the CosmicJS site
I haven't done web design for iOS but from what I recall seeing in the WWDC sessions and in documentation, the search bar in Mobile Safari, and navigation bars across the OS, will now automatically resize and shrink to show more of your content.
iPhone의 Safari에서이를 테스트하고 페이지에서 더 많은 내용을보기 위해 아래로 스크롤하면 탐색 / 검색 막대가 자동으로 숨겨집니다.
주소 표시 줄 / 탐색 모음을 그대로두고 전체 화면 환경을 만들지 않는 것이 가장 좋습니다. 애플이 곧 그렇게하는 것을 보지 못합니다. 그리고 주소 표시 줄이 표시되거나 숨겨 질 때 자동으로 제어되지 않습니다.
물론, 특히 iPhone 4 또는 4S에서 화면 공간을 잃어 버리고 있지만 베타 4의 대안은없는 것 같습니다.
'Programing' 카테고리의 다른 글
| 매크로에서 익명 클래스의 메소드를 사용하여 구조 유형 가져 오기 (0) | 2020.05.18 |
|---|---|
| Android에서 가로 ListView를 만들려면 어떻게해야합니까? (0) | 2020.05.18 |
| 인터페이스 메소드의 최종 인수-요점은 무엇입니까? (0) | 2020.05.18 |
| Amazon EC2 주문형 인스턴스와 비슷한 주문형 Mac OS X 클라우드 서비스가 있습니까? (0) | 2020.05.18 |
| GCC와 g ++는 어떻게 부트 스트랩됩니까? (0) | 2020.05.18 |