iOS 8 usunięto właściwość viewport "minimal-ui", czy są inne rozwiązania "soft fullscreen"?
(jest to pytanie wieloczęściowe, postaram się jak najlepiej podsumować scenariusz.)
[11]} obecnie budujemy responsywną aplikację internetową (czytnik wiadomości), która umożliwia użytkownikom przesuwanie palcem między treścią z kartami, a także przewijanie pionowo wewnątrz każdej zawartości z kart.Powszechnym podejściem do problemu jest posiadanie wrappera div, który wypełnia widok przeglądarki, ustawia overflow na hidden lub auto, a następnie przewija poziomo i/lub pionowo wewnątrz niego.
To podejście jest świetne, ale ma jedną główną wadę: ponieważ wysokość dokumentu jest dokładnie taka sama jak widok przeglądarki, przeglądarka mobilna nie ukryje paska adresu/menu nawigacyjnego.
Istnieją liczne hacki i właściwości viewportu , które pozwalają nam uzyskać WIĘCEJ NIERUCHOMOŚCI ekranu, ale żaden z nich nie jest tak skuteczny jak minimal-ui (wprowadzony w iOS 7.1).
Wczoraj przyszła wiadomość, że iOS 8 beta4 usunął {[4] } z mobilnego Safari (patrz sekcja Webkit w iOS 8 Release Notes ), które pozostawiły nas zastanawiające:
Q1. Czy nadal można ukryć pasek adresu w mobilnym Safari?
O ile wiemy, iOS 7nie odpowiada już na włamanie window.scrollTo, sugeruje to, że musimy żyć z mniejszą przestrzenią ekranu, chyba że przyjmiemy pionowy układ lub użyjemy mobile-web-app-capable.
Q2. Czy nadal można mieć podobny soft pełnoekranowy?
By soft fullscreen naprawdę oznacza bez użycia meta tagu mobile-web-app-capable.
Nasza aplikacja internetowa jest zbudowana tak, aby była dostępna, każda strona może być dodana do zakładek lub udostępniona za pomocą natywnego menu przeglądarki. Dodając mobile-web-app-capable uniemożliwiamy użytkownikom wywoływanie takiego menu (gdy jest ono zapisywane na ekranie głównym), które myli i antagonizuje użytkowników.
minimal-ui kiedyś był to środkowy grunt, domyślnie ukrywając menu, ale utrzymując je dostępne za pomocą kranu -- choć Apple mogło je usunąć z powodu innych problemów z dostępnością (takich jak użytkownicy nie wiedzą, gdzie stuknąć, aby aktywować menu).
Q3. Czy korzystanie z pełnoekranowego ekranu jest warte zachodu?
Wydaje się, żefullscreen API nie pojawi się wkrótce na iOS, ale nawet jeśli tak, nie widzę, jak menu będzie dostępne (to samo dotyczy Chrome na Androida).
W tym przypadku może powinniśmy po prostu zostawić mobile safari tak, jak jest, i uwzględnić wysokość viewportu (dla iPhone 5+, to 460 = 568 - 108, gdzie 108 zawiera Pasek systemu operacyjnego, pasek adresu i menu nawigacyjne; dla iPhone 4 lub starszych to 372).
Chciałbym usłyszeć jakieś alternatywy (oprócz budowania natywnej aplikacji).
9 answers
Właściwość minimal-ui viewport jest nie jest już obsługiwana w systemie iOS 8. Jednak sam minimal-ui nie zniknął. Użytkownik może wprowadzić minimal-ui z gestem "touch-drag down".
Istnieje kilka warunków wstępnych i przeszkód do zarządzania stanem widoku, np. aby minimal-ui działał, musi być wystarczająco dużo zawartości, aby umożliwić użytkownikowi przewijanie; aby minimal-ui utrzymał się, przewijanie okna musi być przesunięte przy ładowaniu strony i po zmianie orientacji. Jednak nie ma możliwości obliczanie wymiarów minimal-ui przy użyciu zmiennej screen, a więc nie sposób określić, kiedy użytkownik jest w minimal-ui z góry.
Po załadowaniu strony, Brim utworzy element bieżni. Element bieżni służy do zapewnienia użytkownikowi miejsca do przewijania. Obecność bieżnia element zapewnia, że użytkownik może wejść do widoku minimal-ui i że nadal utrzymuje się, jeśli użytkownik przeładuje stronę lub zmieni orientacja urządzenia. Jest niewidoczny dla użytkownika przez cały czas. To element ma ID
brim-treadmill.Po wczytaniu strony lub po zmianie orientacji, Brim używa Scream aby wykryć czy strona jest w minimal-UI view (strona, która była wcześniej w minimal-ui i ma przeładowane pozostanie w minimalnym interfejsie użytkownika, jeśli wysokość zawartości większa niż wysokość punktu widokowego).
Gdy strona znajduje się w minimal-ui, Brim wyłączy przewijanie dokument (robi to w sejfie sposób , który nie wpływa Zawartość głównego elementu). Wyłączanie przewijania dokumentów zapobiega przypadkowemu opuszczaniu minimal-ui podczas przewijania w górę. Zgodnie z oryginalną specyfikacją iOS 7.1, dotknięcie górnego paska przywraca reszta chromu.
Efekt końcowy wygląda następująco to:
W trosce o dokumentację, a jeśli wolisz napisać własną implementację, warto zauważyć, że nie możesz użyć Scream do wykrycia, czy urządzenie znajduje się w minimal-ui zaraz po zdarzeniu orientationchange, ponieważ window wymiary nie odzwierciedlają nowej orientacji, dopóki animacja obrotu nie zostanie zakończona. Do zdarzenia orientationchangeend należy dołączyć listener.
Krzyk i orientationchangeend zostały opracowane w ramach tego projektu.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:17:56
Ponieważ nie ma programowego sposobu naśladowania minimal-ui, wymyśliliśmy inne obejście, używając calc() i znanej wysokości paska adresu iOS na naszą korzyść:
Następująca strona demonstracyjna (dostępna również w gist, więcej szczegółów technicznych tam) poprosi użytkownika o przewinięcie, które następnie uruchamia miękki-pełnoekranowy (ukryj pasek adresu / menu), gdzie nagłówek i zawartość wypełniają nowy widok.
<!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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-01 11:18:34
Po prostu pożegnaj się z minimal-ui (na razie)
To prawda, może być zarówno użyteczne, jak i szkodliwe, i przypuszczam, że kompromis ma teraz inną równowagę, na korzyść nowszych, większych iphone ' ów.Zajmowałem się tym problemem podczas pracy z moim frameworkiem js dla aplikacji HTML5. Po wielu próbach rozwiązań, każdy z ich wadami, poddałem się biorąc pod uwagę, że miejsce utracone na iPhone ' ach poprzednie niż 6. Biorąc pod uwagę sytuację, myślę, że jedynym solidnym i przewidywalnym zachowaniem jest z góry ustalone.
W skrócie, skończyło się zapobieganie jakiejkolwiek formie minimal-ui, więc przynajmniej moja wysokość ekranu jest zawsze taka sama i zawsze wiesz, co rzeczywiste miejsce masz dla swojej aplikacji.
Z Pomocą czasu, wystarczająco dużo użytkowników będzie miało więcej miejsca.
Edytuj
Jak to robię
Jest to trochę uproszczone, dla celów demo, ale powinno działać dla Ciebie. Zakładając, że masz główny kontener
html, body, #main {
height: 100%;
width: 100%;
overflow: hidden;
}
.view {
width: 100%;
height: 100%;
overflow: scroll;
}
Wtedy:
-
Wtedy z js, ustawiłem wysokość
#mainNa dostępną wysokość okna. Pomaga to również radzić sobie z innymi błędami przewijania znajdowanymi zarówno w systemie iOS, jak i Android. Oznacza to również, że musisz poradzić sobie z tym, jak go zaktualizować, po prostu zauważ, że; {]} -
Blokuję przewijanie po osiągnięciu granic zwoju. Ten jest nieco głębszy w moim kodzie, ale myślę, że równie dobrze możesz przestrzegać zasady tej odpowiedzi dla podstawowej funkcjonalności. Myślę, że to może trochę flickr, ale zrobi praca.
Zobacz demo (na iPhonie)
Jako boczna Uwaga: Ta aplikacja też jest bookmarkable, ponieważ używa wewnętrznego routingu do haszowanych adresów, ale dodałem również monit użytkowników iOS, aby dodać do domu. Czuję, że w ten sposób pomaga lojalność i powracających gości (i tak utracona przestrzeń powraca).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-20 09:12:55
Najprostszym sposobem, jaki znalazłem, aby to naprawić, było ustawienie wysokości ciała i elementów html na 100.1% dla każdego żądania, w którym agent użytkownika był iphone. To działa tylko w trybie poziomym, ale to wszystko, czego potrzebowałem.
html.iphone,
html.iphone body { height: 100.1%; }
Sprawdź to na https://www.360jungle.com/virtual-tour/25
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-05 05:15:04
Główny problem wygląda na to, że iOS8 safari nie ukryje paska adresu podczas przewijania w dół, jeśli zawartość jest równa lub mniejsza niż widok.
Jak już się przekonałeś, dodanie wypełnienia na dole rozwiązuje ten problem:
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);
}
});
Powyższy css powinien być zastosowany warunkowo, na przykład z sniffingiem UA dodającym klasę gt-ios8 do <html>.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-04 13:08:57
Chcę skomentować / częściowo odpowiedzieć/podzielić się swoimi przemyśleniami. Używam techniki overflow-y: scroll do mojego wielkiego nadchodzącego projektu. Korzystanie z niego ma dwie główne zalety.
A) możesz użyć szuflady z przyciskami akcji od dołu ekranu; jeśli dokument zostanie przewinięty, a dolny pasek zniknie, dotknięcie przycisku znajdującego się u dołu ekranu spowoduje, że dolny pasek pojawi się, a następnie będzie można kliknąć. Również sposób, w jaki to działa, powoduje problemy z modalami, które mają guziki na dole.
B) gdy używasz elementu przepełnionego, jedynymi rzeczami, które są przemalowywane w przypadku większych zmian css, są te, które są widoczne na ekranie. Dało mi to ogromny wzrost wydajności podczas używania javascript do zmiany css wielu elementów w locie. Na przykład, jeśli masz listę 20 elementów, które musisz przemalować, a tylko dwa z nich są wyświetlane na ekranie w elemencie przepełnionym, tylko te są przemalowane, podczas gdy pozostałe są przemalowane podczas przewijania. Bez tego wszystkiego 20 elementów jest przemalowanych.
..oczywiście zależy to od projektu i czy potrzebujesz jakiejkolwiek funkcjonalności, o której wspomniałem. Google używa przepełnionych elementów do Gmaila, aby korzystać z funkcjonalności, którą opisałem na a). Imo, warto, nawet biorąc pod uwagę małą wysokość w starszych iPhone ' ach (372px jak mówiłeś).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-30 23:23:06
Jest to możliwe, używając czegoś takiego jak Poniższy przykład, który zestawiłem z Pomocą pracy z ( https://gist.github.com/bitinn/1700068a276fb29740a7[[3]}) to nie do końca działało na iOS 11:
Oto zmodyfikowany kod, który działa na iOS 11.03, proszę skomentować, jeśli działał dla Ciebie.
Kluczem jest dodanie rozmiaru do ciała, aby przeglądarka mogła przewijać, np: height: calc( 100% + 40px);
Pełna próbka poniżej i link do wyświetlenia w przeglądarce (proszę 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>
Pełny przykładowy link tutaj: https://repos.codehot.tech / misc/iOS-webapp-przykład2.html
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-24 18:22:37
Możliwe jest uruchomienie aplikacji internetowej w trybie pełnoekranowym zarówno w systemie iOS, jak i Android, nazywa się to PWA i po ciężkiej pracy, to był jedyny sposób na obejście tego problemu.
PWAs otwiera wiele ciekawych opcji rozwoju, których nie można przegapić. Zrobiłem już kilka, sprawdź to Public and Private Tender Manual For Designers (Hiszpański). A oto angielskie Wyjaśnienie ze strony CosmicJS
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-01-13 21:57:46
Nie robiłem projektowania stron internetowych dla iOS, ale z tego, co pamiętam, widziałem w sesjach WWDC i w dokumentacji, pasek wyszukiwania w mobilnej Safari i paski nawigacji w całym systemie operacyjnym, automatycznie zmieni rozmiar i zmniejszy się, aby pokazać więcej treści.
Możesz przetestować to w Safari na iPhonie i zauważyć, że po przewinięciu w dół, aby zobaczyć więcej treści na stronie, pasek nawigacji/wyszukiwania jest automatycznie ukryty.
Być może pozostawienie paska adresu / paska nawigacji tak, jak jest, a nie najlepsze jest tworzenie pełnoekranowego doświadczenia. Apple nie robi tego w najbliższym czasie. Co najwyżej nie kontrolują automatycznie, kiedy pasek adresu pokazuje/ukrywa się.
Jasne, tracisz nieruchomości ekranu, szczególnie na iPhone 4 lub 4S, ale nie wydaje się być alternatywą od wersji Beta 4.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-22 13:58:35