iOS 8 “minimal-ui” viewport özelliğini kaldırdı, başka “yumuşak tam ekran” çözümleri var mı?

(Bu çok parçalı bir soru, senaryoyu özetlemek için elimden geleni yapacağım.)

Şu anda, kullanıcıların sekmeli içerikler arasında kaydırma yapmalarına ve sekmeli içeriklerin her birinde dikey olarak kaydırma yapmalarına olanak tanıyan duyarlı bir web uygulaması (haber okuyucu) oluşturuyoruz.

Sorunun yaygın yaklaşım sarmalayıcı sahip olmaktır divtarayıcı görünüm, set doldurur overflowiçin hiddenveya autodaha sonra kaydırma yatay ve / veya dikey onun içinde.

Bu yaklaşım harika ama bir dezavantajı var: belgenin yüksekliği tarayıcı görünümüyle tamamen aynı olduğundan, mobil tarayıcı adres çubuğunu / gezinme menüsünü gizlemeyecektir .

Orada sayısız kesmek ve görüntü kutusu özellikleri daha fazla ekran gayrimenkul elde etmemizi sağlayacak, ama hiçbiri oldukça gibi etkilidir minimal-ui(iOS 7.1 tanıtılan).

Dün, iOS 8 beta4'ün minimal-uiMobil Safari'den kaldırıldığına dair haberler geldi ( iOS 8 Sürüm Notları'ndaki Webkit bölümüne bakın ).

S1. Mobil Safari'de adres çubuğunu gizlemek hala mümkün müdür?

Bildiğim kadarıyla bildiğimiz gibi, iOS 7 artık cevap verir karşı window.scrollTohack, bu biz dikey düzeni veya kullanımını kabul sürece, daha küçük ekran alanı ile yaşamak zorunda önerir mobile-web-app-capable.

S2. Benzer bir yumuşak tam ekran deneyimine sahip olmak hala mümkün mü?

By yumuşak tam ekran gerçekten kullanmadan anlamına mobile-web-app-capablemeta etiketi.

Web uygulamamız erişilebilir olacak şekilde oluşturulmuştur, herhangi bir sayfaya yerel tarayıcı menüsü kullanılarak yer imi eklenebilir veya paylaşılabilir. Ekleyerek mobile-web-app-capable, kullanıcıların karıştırdığı ve antagonize ettiği bu menüyü (ana ekrana kaydedildiğinde) çağırmasını önleriz.

minimal-uiEskiden orta yoldaydı, menüyü varsayılan olarak gizliyor ancak bir dokunmayla erişilebilir tutuyor - Apple diğer erişilebilirlik endişeleri nedeniyle kaldırmış olabilir (kullanıcılar menüyü etkinleştirmek için nereye dokunacaklarını bilmiyor gibi).

Q3. Tam ekran deneyimi sorun çıkarmaya değer mi?

Tam ekran bir API'nın yakında iOS'a gelmeyeceği anlaşılıyor, ancak öyle olsa bile, menünün nasıl erişilebilir olacağını göremiyorum (Android'de Chrome için de aynı şey geçerli).

Bu durumda, belki de olduğu gibi mobil safariden ayrılmalı ve görünüm yüksekliğini hesaba katmalıyız (iPhone 5+ için 460 = 568 - 108, burada 108 işletim sistemi çubuğu, adres çubuğu ve gezinme menüsünü içerir; iPhone 4 veya daha eski, 372).

(Yerel bir uygulama oluşturmanın yanı sıra) bazı alternatifler duymak isterim.

Minimum-ui viewport özelliği artık iOS 8'de desteklenmemektedir . Ancak, minimal-ui'nin kendisi gitmemiştir. Kullanıcı "u-sürükle" hareketi ile minimal-ui'ye girebilir.

Görüntüleme durumunu yönetmek için çeşitli ön koşullar ve engeller vardır, örneğin minimal-ui'nin çalışması için kullanıcının kaydırmasını sağlamak için yeterli içerik olmalıdır; minimal-ui'nin devam edebilmesi için, sayfa yüklendiğinde ve yön değiştirildikten sonra pencere kaydırması kaydırılmalıdır. Bununla birlikte, değişkeni kullanarak minimal-ui'nin boyutlarını hesaplamanın bir yolu yokturscreen ve dolayısıyla kullanıcı minimal-ui'de önceden olduğunda bunu söylemenin bir yolu yoktur.

Bu gözlemler, iOS 8 için Brim - view manager geliştirmenin bir parçası olarak yapılan araştırmanın bir sonucudur . Son uygulama şu şekilde çalışır:

Sayfa yüklendiğinde, Brim bir koşu bandı öğesi oluşturur. Koşu bandı elemanı, kullanıcıya kaydırma alanı sağlamak için kullanılır. Koşu bandı öğesinin bulunması, kullanıcının minimum kullanıcı arabirimi görünümüne girebilmesini ve kullanıcı sayfayı yeniden yüklediğinde veya aygıt yönünü değiştirdiğinde devam etmesini sağlar. Kullanıcı tarafından sürekli olarak görünmez. Bu öğenin kimliği var brim-treadmill.

Sayfayı yükledikten veya yönlendirmeyi değiştirdikten sonra Brim, sayfanın en az kullanıcı arayüzü görünümünde olup olmadığını tespit etmek için Scream'i kullanıyor (daha önce en az kullanıcı arayüzünde bulunan ve yeniden yüklenen sayfa, içerik yüksekliği görünüm yüksekliğinden daha büyük).

Sayfa minimal kullanıcı arayüzündeyken, Brim belgenin kaydırılmasını devre dışı bırakır (bunu ana öğenin içeriğini etkilemeyen güvenli bir şekilde yapar). Belge kaydırmayı devre dışı bırakmak, yukarı kaydırırken yanlışlıkla minimum kullanıcı arayüzünü bırakmayı önler. Orijinal iOS 7.1 spesifikasyonuna göre, üst çubuğa dokunmak kromun geri kalanını geri getiriyor.

Sonuç şöyle görünür:

Belgelerin uğruna, ve durumda kendi uygulama yazmayı tercih, bu kullanamazsınız fazlalaştı Çığlık cihaz olup olmadığını tespit etmek için minimal ui hemen sonra orientationChange olayı nedeniyle windowboyutları kadar yeni yönelimini yansıtmaz döndürme animasyonu sona erdi. Orientationchangeend olayına bir dinleyici eklemeniz gerekir .

Çığlık ve oryantasyon değişimi bu projenin bir parçası olarak geliştirilmiştir.

Taklit etmek için programlı bir yol olmadığından minimal-ui, calc()iOS adres çubuğu yüksekliğini kendi avantajımıza kullanarak ve bildiğimiz farklı bir çözüm bulduk :

Aşağıdaki demo sayfası ( aynı zamanda gist, daha fazla teknik ayrıntıda da mevcuttur ) kullanıcının kaydırma yapmasını isteyecektir, bu da üstbilginin ve içeriğin yeni görünüm penceresini doldurduğu bir yumuşak tam ekranı (adres çubuğunu / menüsünü gizle) tetikler.

<!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>

Sadece minimal-ui'ye veda et (şimdilik)

Doğru, minimal-uihem yararlı hem de zararlı olabilir ve sanırım artık daha yeni, daha büyük iPhone'lar lehine başka bir denge var.

HTML5 uygulamaları için js çerçevemle çalışırken bu sorunu ele alıyorum. Her biri dezavantajları olan birçok girişim çözümünden sonra, 6'dan önceki iPhone'larda alan kaybolduğunu düşünmeye teslim oldum. Durum göz önüne alındığında, tek katı ve öngörülebilir davranışın önceden belirlenmiş bir davranış olduğunu düşünüyorum.

Kısacası, herhangi bir minimal-ui formunu önledim , bu yüzden en azından ekran yüksekliğim her zaman aynı ve uygulamanız için hangi gerçek alana sahip olduğunuzu her zaman biliyorsunuz.

Zamanın yardımı ile, yeterli sayıda kullanıcının daha fazla yeri olacaktır.

DÜZENLE

Nasıl yaparım

Bu, demo amacıyla biraz basitleştirilmiştir, ancak sizin için çalışmalıdır. Bir ana konteyneriniz olduğunu varsayarsak

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

Sonra:

1. sonra js ile, #mainyüksekliğini pencerenin mevcut yüksekliğine ayarladım . Bu aynı zamanda hem iOS hem de Android'de bulunan diğer kaydırma hatalarıyla başa çıkmanıza yardımcı olur. Ayrıca, nasıl güncelleneceğini ele almanız gerektiği anlamına gelir;

2. Kaydırma sınırlarına ulaştığında aşırı kaydırmayı engelliyorum. Bu benim kod biraz daha derin, ama ben de temel işlevsellik için bu cevap ilkesini takip edebilirsiniz düşünüyorum . Sanırım biraz titreyebilirdi, ama işi yapacak.

Demoyu izleyin (iPhone'da)

Bir sidenote olarak: Bu uygulama da adresleri karma yapmak için dahili bir yönlendirme kullandığından yer imi olarak kullanılabilir, ancak aynı zamanda iOS kullanıcılarına eve eklemelerini isteyen bir bilgi ekledim. Bu şekilde sadakat ve geri dönen ziyaretçilere yardımcı olduğunu hissediyorum (ve böylece kayıp alan geri döndü).

Bunu düzeltmek için bulduğum en kolay yolu, kullanıcı aracısının bir iphone olduğu herhangi bir istek için vücut ve html öğelerinin yüksekliğini% 100.1'e ayarlamaktı. Bu sadece Manzara modunda çalışır, ama tüm ihtiyacım olan bu.

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

Https://www.360jungle.com/virtual-tour/25 adresinden kontrol edin

Buradaki temel sorun, içerik görünüm penceresine eşit veya daha küçükse, aşağı kaydırırken iOS8 safarisinin adres çubuğunu gizlemediği anlaşılıyor.

Bildiğiniz gibi, altına bir miktar dolgu eklemek bu sorunu çözüyor:

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);
    }
});

Yukarıdaki css koşullu olarak uygulanmalıdır, örneğin UA koklama gt-ios8sınıfına bir sınıf ekleyerek <html>.

Düşüncelerimi yorumlamak / kısmen cevaplamak / paylaşmak istiyorum. Gelecek büyük bir projem için taşma-y: kaydırma tekniğini kullanıyorum. Bunu kullanmanın iki ana avantajı vardır.

a) Ekranın alt kısmındaki işlem düğmelerine sahip bir çekmece kullanabilirsiniz; belge kaydırılırsa ve alt çubuk kaybolursa, ekranın altında bulunan bir düğmeye dokunmak önce alt çubuğun görünmesini ve ardından tıklanabilir olmasını sağlar. Ayrıca, bu şeyin çalışma şekli, en altta düğmeler olan modals ile ilgili sorunlara neden olur.

b) Taşan bir eleman kullanıldığında, büyük css değişiklikleri durumunda yeniden boyanan tek şey görüntülenebilir ekranda olanlar. Bu, anında birden çok öğenin css'sini değiştirmek için javascript kullanırken büyük bir performans artışı sağladı. Örneğin, 20 öğeden oluşan bir listeniz varsa, yeniden boyanmanız gerekir ve taşan öğede sadece ikisi ekranda kalırsa, kayarken kaydırma sırasında yalnızca ikisi yeniden boyanırken yeniden boyanır. Onsuz 20 element de yeniden boyanır.

Tabii ki projeye ve bahsettiğim işlevselliklerden herhangi birine ihtiyacınız varsa. Google, Gmail'de a) 'da tanımladığım işlevselliği kullanmak için taşmış öğeleri kullanır. Imo, daha eski iPhone'lardaki küçük yüksekliği bile düşündüğünüz zamana değer (372 piksel).

İOS 11'de tam olarak çalışmayan ( https://gist.github.com/bitinn/1700068a276fb29740a7 ) işinin yardımıyla bir araya getirdiğim aşağıdaki örnek gibi bir şey kullanmak mümkündür :

İşte iOS 11.03'te çalışan değiştirilmiş kod, lütfen sizin için işe yaradıysa yorum yapın.

Anahtar, BODY'ye bir boyut eklemektir, böylece tarayıcı kayabilir, örn: height: calc (% 100 + 40 piksel);

Aşağıda tam örnek ve tarayıcınızda görüntülemek için bağlantı (lütfen test edin!)

<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>

Tam örnek bağlantı: https://repos.codehot.tech/misc/ios-webapp-example2.html

Hem iOS hem de Android'de tam ekran çalışan bir web uygulaması elde etmek mümkündür, buna PWA denir ve mucha sıkı çalışmanın ardından bu sorunun tek yolu buydu.

PWA'lar, gelişim için kaçırılmaması gereken bir dizi ilginç seçenek açar. Zaten bir çift yaptım, Tasarımcılar İçin Bu Kamu ve Özel İhale Kılavuzu'na (İspanyolca) bakın. Ve burada CosmicJS sitesinden bir İngilizce açıklama

İOS için web tasarımı yapmadım, ancak WWDC oturumlarında ve belgelerinde gördüğümden hatırladığım kadarıyla, Mobil Safari'deki arama çubuğu ve işletim sistemi genelinde gezinme çubukları, içeriğinizin daha fazlasını göstermek için otomatik olarak yeniden boyutlandırılacak ve küçülecek.

Bunu iPhone'da Safari'de test edebilir ve bir sayfada daha fazla içerik görmek için sayfayı aşağı kaydırdığınızda gezinme / arama çubuğunun otomatik olarak gizlendiğini fark edebilirsiniz.

Belki de adres çubuğunu / gezinme çubuğunu olduğu gibi bırakmak ve tam ekran deneyimi yaratmamak en iyisidir. Yakında Apple'ın bunu yaptığını görmüyorum. Ve en çok, adres çubuğu gösterildiğinde / gizlendiğinde otomatik olarak kontrol etmezler.

Tabii, özellikle iPhone 4 veya 4S'de ekran gayrimenkulünü kaybediyorsunuz, ancak Beta 4'ten başka bir alternatif yok gibi görünüyor.