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


191

(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).


lihat stackoverflow.com/questions/18793072/... untuk detail lebih lanjut tentang mengapa minimal-ui bisa sangat penting untuk beberapa aplikasi.
bitinn

1
Saya mengalami masalah yang sama di iOS 7, karena kami sedang mencari untuk membangun aplikasi web dengan swipe / scroll events, tetapi menguji onScroll events di iOS8 Beta 4 dan .. mereka bekerja. ios8-scroll-events.heroku.com Tidak yakin apakah itu membantu sama sekali tapi .. Anda memiliki itu untuk Anda.
Devin McInnis

Berlari ke masalah yang sama. Saat ini hanya javascript "fix", karena fungsi calc () di bawah ini adalah satu-satunya jawaban. Harap perbarui utas ini, jika Anda tahu keputusan yang lebih baik. Salam Hormat.
A1exandr

Jawaban:


86

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:

Penuh dengan simulator iOS.

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.


3
Ini jauh lebih ekspansif daripada jawaban asli saya, ditandai sebagai jawaban baru sampai solusi yang lebih baik tiba :)
bitinn

4
Tampak bagus! Bisakah saya memaksa minimal-ui tanpa gulir awal?
INT

50
Ini benar-benar bukan cerita yang berakhir. Saya adalah pengembang game dalam HTML dan minimal-ui di iOS 7.1 bekerja dengan baik - itu adalah satu-satunya cara untuk memiliki aplikasi yang menjalankan layar penuh DAN pada saat yang sama dapat menyentuh di bagian bawah layar. Solusi dengan menggesekkan halaman bagus, tapi tidak cukup bagus :( Apple, kita perlu implementasi API layar penuh yang tepat untuk game.
Petr Urban

4
@Petr: Saya sangat setuju. Ketika perbaikan ini diumumkan pada 7.1, kami dengan cepat meluncurkan aliran pembelian checkout baru yang menyematkan CTA utama ke bagian bawah layar .. ini berhasil dan dikonversi menjadi hebat! Rasanya sangat "asli" dan mulus. Yang saya pikir adalah masalah sebenarnya. Jika dipikir-pikir, itu bukan kepentingan utama Apel agar aplikasi web terasa asli. Ini sebenarnya merupakan konflik kepentingan langsung dengan monopoli App Store mereka. Ini, IMO, satu-satunya alasan yang sah mengapa suatu fitur yang sangat masuk akal diperbaiki dan kemudian dihapus dengan sengaja. # my2Cents :)
Jose Browne

2
@PetrUrban Saya yakin bahwa Apple akan memilih Anda untuk menerbitkan game Anda sebagai aplikasi phonegap daripada mengizinkan Anda untuk melayani melalui web. Keputusan mereka baru-baru ini untuk mengizinkan pemblokir iklan untuk melindungi ide ini.
Patrick Gunderson

20

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>

10

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


Untuk menonaktifkan minimal-ui tampaknya sangat masuk akal bagi saya. Tolong, sertakan deskripsi singkat untuk bagaimana melakukan itu!
István Pálinkás

Anda benar, saya menambahkan sedikit caranya. Banyak cara lain akan berhasil.
Francesco Frapporti

1
Demo Anda tidak berfungsi di iOS8, menurut iPhone saya 5.
dmr07

Terima kasih telah memberi tahu saya, ini pasti pembaruan karena dulu berfungsi. Apakah Anda di safari? Apa maksud Anda tepatnya dengan itu tidak berhasil?
Francesco Frapporti

7

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


Terima kasih @Stephen. tinggi: 100,1% membantu saya. Namun, ketika saya membuka Safari 360jungle.com/virtual-tour/25 di iPhone (iOS 11.1.1) dan mengklik tombol di bagian bawah, bilah alamat dan bilah alat muncul. Ini karena tombolnya terlalu dekat dengan ujung layar. Saya kira akan lebih baik memindahkan mereka ke tempat lain pada mode seluler.
Téwa

2

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


1
Apa sebenarnya yang dilakukan JS ini?
Ben Sinclair

Jika Anda merujuk scrollIntoViewIfNeeded, ini bukan turunan standar scrollIntoView( developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView ). Seperti namanya, metode menggulir elemen ke tampilan. trueparameter mengatakan untuk menyelaraskan tampilan dengan bagian atas elemen. Ini berlaku seharusnya mencegah Anda dari bergulir. Namun implementasinya cacat.
Gajus

1

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


1

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



-2

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.


1
Saya tahu fitur iOS7 + ini, tetapi lihat penjelasan saya di atas: karena ketinggian dokumen persis sama dengan viewport browser, browser seluler tidak akan menyembunyikan bilah alamat / menu navigasi , karena tidak ada scroll yang terjadi pada level dokumen.
bitinn

1
Ini mungkin menjadi batasan saat Beta 4 telah menghapus fitur itu. Ada kemungkinan dan kemungkinan bahwa Apple mengendalikan bilah alamat secara otomatis dan mencegah pengembang mengaksesnya.
iFeli

8
I haven't done web design for iOS- jika Anda melakukan desain web, Anda melakukannya untuk setiap platform. Karena web ada di setiap platform.
ProblemsOfSumit

4
@Sumit Saya tahu bahwa bekerja di web bersifat universal, tetapi setiap browser dan kerangka dasarnya memiliki atribut CSS tertentu. Jadi Chrome mungkin memiliki beberapa atribut yang tidak tersedia untuk Safari dan FireFox, dan sebaliknya.
iFeli
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.