iOS 8 menghapus properti viewport "minimal-ui", apakah ada solusi "soft fullscreen" lainnya?

(Ini adalah pertanyaan multi-bagian, saya akan mencoba yang terbaik untuk meringkas skenario.)

Kami saat ini sedang membangun aplikasi web yang responsif (pembaca berita) yang memungkinkan pengguna untuk menggesek di antara konten yang tab, serta menggulir secara vertikal di dalam setiap konten yang tab.

Pendekatan umum untuk masalah ini adalah memiliki pembungkus divyang memenuhi viewport browser, diatur overflowke hiddenatau auto, kemudian gulir secara horizontal dan / atau vertikal di dalamnya.

Pendekatan ini hebat tetapi memiliki satu kelemahan utama: karena ketinggian dokumen persis sama dengan viewport browser, browser seluler tidak akan menyembunyikan bilah alamat / menu navigasi .

Ada banyak peretasan dan properti viewport yang memungkinkan kami untuk mendapatkan lebih banyak real estat layar, tetapi tidak ada yang seefektif minimal-ui(diperkenalkan di iOS 7.1).

Berita datang kemarin bahwa iOS 8 beta4 telah dihapus minimal-uidari Mobile Safari (lihat bagian Webkit di Catatan Rilis iOS 8 ), yang membuat kami bertanya-tanya:

Q1. Apakah masih mungkin menyembunyikan bilah alamat di Mobile Safari?

Sejauh yang kami tahu, iOS 7 tidak merespon lagi ke window.scrollTohack, ini menunjukkan kita harus hidup dengan ruang layar yang lebih kecil, kecuali kita mengadopsi tata letak vertikal atau penggunaan mobile-web-app-capable.

Q2. Apakah masih mungkin untuk memiliki pengalaman layar penuh lunak yang serupa?

Dengan soft fullscreen yang saya maksud sebenarnya tanpa menggunakan mobile-web-app-capablemeta tag.

Aplikasi web kami dibuat agar dapat diakses, halaman apa saja dapat ditandai atau dibagikan menggunakan menu browser asli. Dengan menambahkan, mobile-web-app-capablekami mencegah pengguna meminta menu tersebut (ketika disimpan ke layar beranda), yang membingungkan dan memusuhi pengguna.

minimal-uidulu merupakan jalan tengah, menyembunyikan menu secara default tetapi menjaganya tetap dapat diakses dengan satu ketukan - meskipun Apple mungkin telah menghapusnya karena masalah aksesibilitas lainnya (seperti pengguna yang tidak tahu ke mana harus mengetuk untuk mengaktifkan menu).

Q3. Apakah pengalaman layar penuh sepadan dengan masalahnya?

Tampaknya API layar penuh tidak akan datang ke iOS dalam waktu dekat, tetapi meskipun demikian, saya tidak melihat bagaimana menu akan tetap dapat diakses (hal yang sama berlaku untuk Chrome di Android).

Dalam hal ini, mungkin kita harus meninggalkan safari seluler apa adanya, dan memperhitungkan tinggi viewport (untuk iPhone 5+, ini 460 = 568 - 108, di mana 108 menyertakan bilah OS, bilah alamat dan menu navigasi; untuk iPhone 4 atau lebih tua, 372).

Senang mendengar beberapa alternatif (selain membangun aplikasi asli).

Properti viewport minimal-ui tidak lagi didukung di iOS 8. Namun, minimal-ui itu sendiri tidak hilang. Pengguna dapat memasukkan minimal-ui dengan gerakan "sentuh-tarik ke bawah".

Ada beberapa pra-kondisi dan hambatan untuk mengelola kondisi tampilan, misalnya agar minimal ui berfungsi, harus ada cukup konten untuk memungkinkan pengguna menggulir; agar minimal-ui bertahan, gulir jendela harus diimbangi saat memuat halaman dan setelah perubahan orientasi. Namun, tidak ada cara untuk menghitung dimensi minimal-ui menggunakan screenvariabel, dan dengan demikian tidak ada cara untuk mengetahui kapan pengguna berada di minimal-ui sebelumnya.

Pengamatan ini merupakan hasil penelitian sebagai bagian dari pengembangan Brim-view manager untuk iOS 8 . Implementasi akhir bekerja dengan cara berikut:

Saat halaman dimuat, Brim akan membuat elemen treadmill. Elemen Treadmill digunakan untuk memberi ruang pengguna untuk menggulir. Kehadiran elemen treadmill memastikan bahwa pengguna dapat memasuki tampilan minimal ui dan terus berlanjut jika pengguna memuat ulang halaman atau mengubah orientasi perangkat. Itu tidak terlihat oleh pengguna sepanjang waktu. Elemen ini memiliki ID brim-treadmill.

Setelah memuat halaman atau setelah mengubah orientasi, Brim menggunakan Scream untuk mendeteksi jika halaman dalam tampilan minimal-ui (halaman yang sebelumnya dalam minimal-ui dan telah dimuat ulang akan tetap di minimal-ui jika tinggi konten adalah lebih besar dari tinggi viewport).

Ketika halaman berada di minimal-ui, Brim akan menonaktifkan pengguliran dokumen (ini dilakukan dengan cara yang aman yang tidak mempengaruhi isi elemen utama). Menonaktifkan pengguliran dokumen mencegah secara tidak sengaja meninggalkan minimal-ui saat menggulir ke atas. Sesuai spesifikasi iOS 7.1 asli, mengetuk bilah atas akan mengembalikan sisa chrome.

Hasil akhirnya terlihat seperti ini:

Demi dokumentasi, dan jika Anda lebih suka untuk menulis implementasi Anda sendiri, perlu dicatat bahwa Anda tidak dapat menggunakan Scream untuk mendeteksi jika perangkat berada dalam minimal-ui langsung setelah peristiwa orientasi perubahan karena windowdimensi tidak mencerminkan orientasi baru sampai animasi rotasi telah berakhir. Anda harus melampirkan pendengar ke acara orientchangeend .

Jeritan dan perubahan orientasi telah dikembangkan sebagai bagian dari proyek ini.

Karena tidak ada cara terprogram untuk meniru minimal-ui, kami telah menemukan solusi yang berbeda, menggunakan calc()dan diketahui tinggi bilah alamat iOS untuk keuntungan kami:

Halaman demo berikut ( juga tersedia di intisari, lebih banyak detail teknis di sana ) akan meminta pengguna untuk menggulir, yang kemudian memicu layar-penuh lunak (sembunyikan bilah alamat / menu), di mana tajuk dan konten mengisi viewport baru.

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

Ucapkan selamat tinggal pada minimal ui (untuk saat ini)

Memang benar, minimal-uibisa bermanfaat dan berbahaya, dan saya kira trade-off sekarang memiliki keseimbangan lain, mendukung iPhone yang lebih baru dan lebih besar.

Saya telah menangani masalah ini saat bekerja dengan framework js saya untuk aplikasi HTML5. Setelah banyak mencoba solusi, masing-masing dengan kekurangannya, saya menyerah untuk mempertimbangkan bahwa ruang yang hilang pada iPhone sebelum 6. Mengingat situasinya, saya berpikir bahwa satu-satunya perilaku yang solid dan dapat diprediksi adalah yang ditentukan sebelumnya.

Singkatnya, saya akhirnya mencegah segala bentuk minimal-ui , jadi setidaknya ketinggian layar saya selalu sama dan Anda selalu tahu ruang aktual apa yang Anda miliki untuk aplikasi Anda.

Dengan bantuan waktu, pengguna yang cukup akan memiliki lebih banyak ruang.

EDIT

Bagaimana saya melakukannya

Ini sedikit disederhanakan, untuk tujuan demo, tetapi harus bekerja untuk Anda. Dengan asumsi Anda memiliki wadah utama

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

Kemudian:

1. lalu dengan js, saya atur #mainketinggian ke ketinggian jendela yang tersedia. Ini juga membantu menangani bug gulir lain yang ditemukan di iOS dan Android. Ini juga berarti bahwa Anda harus berurusan dengan cara memperbaruinya, hanya perlu diketahui;

2. Saya memblokir pengguliran berlebihan saat mencapai batas-batas gulungan. Yang ini sedikit lebih dalam di kode saya, tapi saya pikir Anda juga bisa mengikuti prinsip jawaban ini untuk fungsionalitas dasar. Saya pikir itu bisa sedikit flickr, tetapi akan melakukan pekerjaan.

Lihat demo (di iPhone)

Sebagai sidenote: aplikasi ini juga dapat dibookmark, karena menggunakan perutean internal ke alamat hash, tapi saya juga menambahkan pengguna iOS yang cepat untuk ditambahkan ke rumah. Saya merasa cara ini membantu kesetiaan dan pengunjung yang kembali (sehingga ruang yang hilang kembali).

Cara termudah yang saya temukan untuk memperbaikinya adalah dengan mengatur tinggi badan dan elemen html menjadi 100,1% untuk setiap permintaan di mana agen pengguna adalah iphone. Ini hanya berfungsi dalam mode Lansekap, tapi hanya itu yang saya butuhkan.

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

Lihat di https://www.360jungle.com/virtual-tour/25

Masalah root di sini tampaknya safari iOS8 tidak akan menyembunyikan bilah alamat saat menggulir ke bawah jika kontennya sama atau kurang dari viewport.

Seperti yang sudah Anda ketahui, menambahkan beberapa bantalan di bagian bawah mengatasi masalah ini:

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 di atas harus diterapkan secara kondisional, misalnya dengan pengendusan UA menambahkan gt-ios8kelas ke <html>.

Saya ingin berkomentar / sebagian menjawab / membagikan pemikiran saya. Saya menggunakan teknik overflow-y: scroll untuk proyek besar saya yang akan datang. Menggunakannya memiliki dua keunggulan UTAMA.

a) Anda dapat menggunakan laci dengan tombol aksi dari bagian bawah layar; jika dokumen bergulir dan bilah bawah menghilang, mengetuk tombol yang terletak di bagian bawah layar akan terlebih dahulu membuat bilah bawah muncul, dan kemudian dapat diklik. Juga, cara benda ini bekerja, menyebabkan masalah dengan modals yang memiliki tombol di bagian paling bawah.

b) Saat menggunakan elemen berlebih, satu-satunya hal yang dicat ulang jika terjadi perubahan css besar adalah yang ada di layar yang dapat dilihat. Ini memberi saya dorongan kinerja besar ketika menggunakan javascript untuk mengubah css dari beberapa elemen dengan cepat. Misalnya, jika Anda memiliki daftar 20 elemen yang perlu Anda cat ulang dan hanya dua di antaranya yang ada di layar di elemen overflown, hanya yang dicat ulang sedangkan sisanya dicat ulang saat menggulir. Tanpa itu semua 20 elemen dicat ulang.

.. tentu saja itu tergantung pada proyek dan jika Anda memerlukan fungsi yang saya sebutkan. Google menggunakan elemen berlebih untuk gmail untuk menggunakan fungsi yang saya jelaskan pada a). Imo, ada baiknya untuk sementara, bahkan mempertimbangkan ketinggian kecil di iPhone lama (372px seperti yang Anda katakan).

Itu mungkin, menggunakan contoh seperti di bawah ini yang saya kumpulkan dengan bantuan pekerjaan dari ( https://gist.github.com/bitinn/1700068a276fb29740a7 ) yang tidak berfungsi pada iOS 11:

Berikut adalah kode yang dimodifikasi yang berfungsi di iOS 11.03, beri komentar jika itu berhasil untuk Anda.

Kuncinya adalah menambahkan beberapa ukuran ke BODY sehingga browser dapat menggulir, mis: tinggi: calc (100% + 40px);

Sampel lengkap di bawah & tautan untuk melihat di peramban Anda (silakan uji!)

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

Tautan contoh lengkap di sini: https://repos.codehot.tech/misc/ios-webapp-example2.html

Dimungkinkan untuk menjalankan aplikasi web dalam layar penuh di iOS dan Android, itu disebut PWA dan setelah banyak kerja keras, itu adalah satu-satunya cara untuk mengatasi masalah ini.

PWA membuka sejumlah opsi menarik untuk pengembangan yang tidak boleh dilewatkan. Saya sudah membuat pasangan, lihat Manual Tender Umum dan Pribadi Untuk Desainer (Spanyol) ini. Dan inilah penjelasan bahasa Inggris dari situs CosmicJS

Saya belum melakukan desain web untuk iOS tetapi dari apa yang saya ingat lihat di sesi WWDC dan dokumentasi, bilah pencarian di Mobile Safari, dan bilah navigasi di OS, sekarang akan secara otomatis mengubah ukuran dan menyusut untuk menampilkan lebih banyak konten Anda.

Anda dapat menguji ini di Safari pada iPhone dan perhatikan bahwa, ketika Anda menggulir ke bawah untuk melihat lebih banyak konten pada halaman, bilah navigasi / pencarian disembunyikan secara otomatis.

Mungkin meninggalkan bilah alamat / bilah navigasi apa adanya, dan tidak menciptakan pengalaman layar penuh, adalah yang terbaik. Saya tidak melihat Apple melakukan itu dalam waktu dekat. Dan paling banyak mereka tidak secara otomatis mengendalikan ketika bilah alamat menunjukkan / menyembunyikan.

Tentu, Anda kehilangan real estat layar, khususnya pada iPhone 4 atau 4S, tetapi sepertinya tidak ada alternatif pada Beta 4.