iOS 8 นำคุณสมบัติวิวพอร์ต“ minimal-ui” ออกแล้วมีโซลูชัน“ full full screen” อื่น ๆ หรือไม่?

(นี่เป็นคำถามที่มีหลายส่วนฉันจะพยายามทำให้ดีที่สุดเพื่อสรุปสถานการณ์)

ขณะนี้เรากำลังสร้างแอปพลิเคชั่นเว็บที่ตอบสนองได้ (โปรแกรมอ่านข่าว) ที่อนุญาตให้ผู้ใช้ปัดระหว่างเนื้อหาที่แท็บและเลื่อนในแนวตั้งภายในเนื้อหาแต่ละแท็บ

วิธีการทั่วไปในการแก้ไขปัญหาคือให้มี wrapper divที่เติมวิวพอร์ตเบราว์เซอร์ตั้งค่าoverflowเป็นhiddenหรือautoจากนั้นเลื่อนในแนวนอนและ / หรือแนวตั้งภายในเบราว์เซอร์

วิธีนี้เป็นวิธีที่ดี แต่มีหนึ่งข้อเสียเปรียบหลัก: ตั้งแต่ความสูงของเอกสารเป็นสิ่งเดียวกับวิวพอร์ตเบราว์เซอร์เบราว์เซอร์บนมือถือจะไม่ซ่อนแถบที่อยู่ / เมนูนำทาง

มีคุณสมบัติแฮ็กและวิวพอร์ตจำนวนมากที่ช่วยให้เราได้รับหน้าจออสังหาริมทรัพย์มากขึ้น แต่ไม่มีสิ่งใดที่มีประสิทธิภาพเท่าminimal-ui(แนะนำใน iOS 7.1)

ข่าวมาเมื่อวานนี้ว่า iOS 8 beta4 ถูกลบออกminimal-uiจาก Mobile Safari (ดูหัวข้อ Webkit ในiOS 8 Release Notes ) ซึ่งทำให้เราสงสัยว่า:

ไตรมาสที่ 1 เป็นไปได้ไหมที่จะซ่อนแถบที่อยู่บน Mobile Safari?

เท่าที่เรารู้ว่า iOS 7 ไม่ตอบสนองอีกต่อไปสับนี้แสดงให้เห็นว่าเราต้องอยู่กับพื้นที่หน้าจอขนาดเล็กเว้นแต่ว่าเรานำมาใช้เป็นรูปแบบแนวตั้งหรือใช้งานwindow.scrollTomobile-web-app-capable

ไตรมาสที่ 2 มันยังคงเป็นไปได้ไหมที่จะมีประสบการณ์แบบเต็มจอที่อ่อนนุ่มคล้ายกัน?

ด้วยซอฟท์เต็มหน้าจอผมหมายถึงโดยไม่ต้องใช้mobile-web-app-capableเมตาแท็ก

แอปพลิเคชันเว็บของเราสร้างขึ้นเพื่อให้สามารถเข้าถึงหน้าใดก็ได้สามารถคั่นหน้าหรือแชร์โดยใช้เมนูเบราว์เซอร์ดั้งเดิม โดยการเพิ่มmobile-web-app-capableเราป้องกันผู้ใช้จากการเรียกใช้เมนูดังกล่าว (เมื่อมันถูกบันทึกไว้ในหน้าจอหลัก) ซึ่งสร้างความสับสนและทำให้ผู้ใช้ไม่เป็นปฏิปักษ์

minimal-uiเคยเป็นพื้นกลางซ่อนเมนูตามค่าเริ่มต้น แต่ทำให้สามารถเข้าถึงได้ด้วยการแตะ - แม้ว่า Apple อาจลบออกเนื่องจากความกังวลเรื่องการเข้าถึงอื่น ๆ (เช่นผู้ใช้ที่ไม่รู้ว่าจะแตะที่ใดเพื่อเปิดใช้งานเมนู)

ไตรมาสที่ 3 ประสบการณ์แบบเต็มหน้าจอเป็นปัญหาหรือไม่

ดูเหมือนว่าAPI แบบเต็มหน้าจอจะไม่มาที่ iOS ทุกเวลาเร็ว ๆ นี้ แต่ถึงแม้ว่าฉันจะไม่เห็นว่าเมนูจะสามารถเข้าถึงได้อย่างไร (เหมือนกับ Chrome บน Android)

ในกรณีนี้บางทีเราควรปล่อยให้ซาฟารีมือถือเป็นอยู่และบัญชีสำหรับความสูงวิวพอร์ต (สำหรับ iPhone 5+ คือ 460 = 568 - 108 โดยที่ 108 มีแถบ OS แถบที่อยู่และเมนูการนำทางสำหรับ iPhone 4 หรือ เก่ากว่ามันคือ 372)

ชอบที่จะได้ยินทางเลือกบางอย่าง

คุณสมบัติวิวพอร์ต Minimal-UI ไม่ได้รับการสนับสนุนใน iOS 8 อีกต่อไปอย่างไรก็ตาม UI ขั้นต่ำตัวเองจะไม่หายไป ผู้ใช้สามารถป้อนขั้นต่ำ UI ด้วยท่าทาง "ลากลงแตะ"

มีเงื่อนไขล่วงหน้าและอุปสรรคหลายประการในการจัดการสถานะมุมมองเช่นเพื่อให้ UI ขั้นต่ำสามารถทำงานได้ต้องมีเนื้อหาเพียงพอที่จะให้ผู้ใช้เลื่อน เพื่อให้ UI ขั้นต่ำยังคงอยู่การเลื่อนหน้าต่างจะต้องถูกชดเชยในการโหลดหน้าและหลังการเปลี่ยนการวางแนว อย่างไรก็ตามไม่มีวิธีคำนวณขนาดของ minimal-uiโดยใช้screenตัวแปรดังนั้นจึงไม่มีวิธีบอกเมื่อผู้ใช้อยู่ใน minim-ui ล่วงหน้า

ข้อสังเกตเหล่านี้เป็นผลมาจากการวิจัยเป็นส่วนหนึ่งของการพัฒนาปีก - ผู้จัดการมุมมองสำหรับ iOS 8 การใช้งานปลายทางทำงานด้วยวิธีดังต่อไปนี้:

เมื่อโหลดหน้าแล้ว Brim จะสร้างองค์ประกอบลู่วิ่ง องค์ประกอบของลู่วิ่งใช้เพื่อให้ผู้ใช้มีพื้นที่ในการเลื่อน การปรากฏตัวขององค์ประกอบ treadmill ให้แน่ใจว่าผู้ใช้สามารถเข้าสู่มุมมองที่น้อยที่สุดและยังคงมีอยู่ถ้าผู้ใช้โหลดหน้าใหม่หรือเปลี่ยนการวางแนวอุปกรณ์ ผู้ใช้ไม่สามารถมองเห็นได้ตลอดเวลา brim-treadmillองค์ประกอบนี้มีรหัส

เมื่อโหลดหน้าเว็บหรือหลังจากเปลี่ยนการวางแนว Brim กำลังใช้ Screamเพื่อตรวจสอบว่าหน้าเว็บนั้นอยู่ในมุมมอง Minimal-UI หรือไม่ (หน้าก่อนหน้านี้ใน Minimal-UI และได้รับการโหลดใหม่จะยังคงอยู่ใน Minimal-UI หากความสูงของเนื้อหาคือ มากกว่าความสูงวิวพอร์ต)

เมื่อเพจอยู่ใน Minimal-ui Brim จะปิดการใช้งานการเลื่อนเอกสาร (ซึ่งจะเป็นการกระทำในวิธีที่ปลอดภัยที่ไม่ส่งผลกระทบต่อเนื้อหาขององค์ประกอบหลัก) การปิดใช้งานการเลื่อนเอกสารจะป้องกันไม่ให้เกิดความผิดพลาดเล็กน้อยขณะเลื่อนขึ้นด้านบน ตามสเป็คดั้งเดิมของ iOS 7.1 การแตะที่แถบด้านบนจะนำโครเมียมที่เหลือกลับมา

ผลลัพธ์ที่ได้จะเป็นดังนี้:

เพื่อประโยชน์ในการจัดทำเอกสารและในกรณีที่คุณต้องการเขียนการติดตั้งใช้งานของคุณเองคุณไม่สามารถใช้Screamเพื่อตรวจสอบว่าอุปกรณ์อยู่ในระยะเวลาน้อยที่สุดหลังจากเหตุการณ์การวางแนวเพราะwindowมิติไม่ได้สะท้อนทิศทางใหม่จนกระทั่ง ภาพเคลื่อนไหวการหมุนได้สิ้นสุดลงแล้ว คุณต้องแนบผู้ฟังกับเหตุการณ์ปฐมนิเทศ

Screamและปฐมนิเทศได้รับการพัฒนาเป็นส่วนหนึ่งของโครงการนี้

เนื่องจากไม่มีวิธีการเขียนโปรแกรมminimal-uiเราจึงมีวิธีแก้ปัญหาที่แตกต่างกันการใช้งานcalc()และการรู้จักแถบความสูงของที่อยู่ iOS เพื่อประโยชน์ของเรา:

หน้าตัวอย่างต่อไปนี้ ( มีอยู่ในส่วนสำคัญรายละเอียดทางเทคนิคเพิ่มเติมที่นั่น ) จะแจ้งให้ผู้ใช้เลื่อนซึ่งจะเปิดหน้าจอแบบเต็มหน้าจอ (ซ่อนแถบที่อยู่ / เมนู) ที่ส่วนหัวและเนื้อหาเติมวิวพอร์ตใหม่

<!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 ที่ใหม่กว่าและใหญ่กว่า

ฉันได้รับการจัดการกับปัญหาในขณะที่ทำงานกับกรอบ js ของฉันสำหรับแอพ HTML5 หลังจากพยายามทำตามวิธีแก้ปัญหาหลายอย่างด้วยกันแล้วฉันก็ยอมแพ้ให้พิจารณาว่าพื้นที่ที่สูญเสียไปกับไอโฟนก่อนหน้า 6 จากสถานการณ์ฉันคิดว่าพฤติกรรมที่มั่นคงและคาดเดาได้เพียงอย่างเดียวคือสิ่งที่กำหนดไว้ล่วงหน้า

กล่าวโดยสรุปฉันลงเอยด้วยการป้องกันรูปแบบ UI ขั้นต่ำใด ๆดังนั้นอย่างน้อยความสูงหน้าจอของฉันก็จะเหมือนเดิมเสมอและคุณก็จะรู้ว่าคุณมีพื้นที่จริงสำหรับแอพของคุณ

ด้วยความช่วยเหลือของเวลาผู้ใช้มากพอจะมีพื้นที่มากขึ้น

แก้ไข

ฉันทำได้อย่างไร

นี่เป็นเรื่องง่ายเล็กน้อยสำหรับการสาธิต แต่ควรเหมาะกับคุณ สมมติว่าคุณมีภาชนะบรรจุหลัก

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

แล้ว:

1. จากนั้นด้วย js ฉันจะตั้ง#mainความสูงเป็นความสูงที่มีของหน้าต่าง นอกจากนี้ยังช่วยจัดการกับข้อบกพร่องการเลื่อนอื่น ๆ ที่พบในทั้ง iOS และ Android นอกจากนี้ยังหมายความว่าคุณต้องจัดการกับวิธีการอัปเดตเพียงแค่ทราบว่า;

2. ฉันปิดกั้นการเลื่อนเกินเมื่อถึงขอบเขตของการเลื่อน อันนี้ลึกลงไปอีกหน่อยในโค้ดของฉัน แต่ฉันคิดว่าคุณสามารถทำตามหลักการของคำตอบนี้สำหรับการใช้งานพื้นฐาน ฉันคิดว่ามันอาจจะสะบัดนิดหน่อย แต่จะทำงาน

ดูตัวอย่าง (บน iPhone)

ในฐานะที่เป็น sidenote: แอพนี้ก็บุ๊กมาร์กด้วยเช่นกันเนื่องจากใช้การกำหนดเส้นทางภายในเพื่อที่อยู่ที่ถูกแฮช แต่ฉันยังเพิ่มผู้ใช้ iOS ที่พร้อมท์เพื่อเพิ่มที่บ้าน ฉันรู้สึกว่าวิธีนี้ช่วยให้มีความภักดีและผู้เข้าชมที่กลับมา (และพื้นที่ที่หายไปกลับคืนมา)

วิธีที่ง่ายที่สุดที่ฉันพบในการแก้ไขปัญหานี้คือการตั้งค่าความสูงขององค์ประกอบเนื้อหาและ html เป็น 100.1% สำหรับคำขอใด ๆ ที่ตัวแทนผู้ใช้เป็น iphone ใช้งานได้เฉพาะในโหมดแนวนอน แต่นั่นคือทั้งหมดที่ฉันต้องการ

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>

ฉันต้องการแสดงความคิดเห็น / ตอบ / แบ่งปันความคิดของฉัน ฉันใช้โอเวอร์โฟลว์ -y: เทคนิคการเลื่อนสำหรับโครงการใหญ่ที่กำลังจะเกิดขึ้นของฉัน การใช้มันมีข้อดีสองประการที่สำคัญ

a) คุณสามารถใช้ลิ้นชักที่มีปุ่มการกระทำจากด้านล่างของหน้าจอ; หากเอกสารเลื่อนและแถบด้านล่างหายไปการแตะที่ปุ่มที่อยู่ด้านล่างของหน้าจอจะทำให้แถบด้านล่างปรากฏขึ้นก่อนจากนั้นคลิกได้ นอกจากนี้วิธีการทำงานสิ่งนี้ทำให้เกิดปัญหากับ modals ที่มีปุ่มที่ด้านล่างสุด

b) เมื่อใช้องค์ประกอบ overflown สิ่งเดียวที่ถูกทาสีใหม่ในกรณีของการเปลี่ยนแปลง css ที่สำคัญคือสิ่งที่อยู่ในหน้าจอที่สามารถดูได้ สิ่งนี้ทำให้ฉันมีประสิทธิภาพที่เพิ่มขึ้นอย่างมากเมื่อใช้จาวาสคริปต์เพื่อเปลี่ยน CSS ขององค์ประกอบหลายอย่างในทันที ตัวอย่างเช่นหากคุณมีรายการองค์ประกอบ 20 รายการคุณต้องทาสีใหม่และมีเพียงสองรายการเท่านั้นที่ปรากฏบนหน้าจอในองค์ประกอบที่ overflown เฉพาะรายการเหล่านั้นจะถูกทาสีใหม่ในขณะที่ส่วนที่เหลือจะถูกทาสีใหม่เมื่อเลื่อน หากไม่มีองค์ประกอบทั้งหมด 20 รายการจะถูกทาสีใหม่

.. แน่นอนมันขึ้นอยู่กับโครงการและหากคุณต้องการฟังก์ชั่นใด ๆ ที่ฉันพูดถึง Google ใช้องค์ประกอบ overflown สำหรับ gmail เพื่อใช้ฟังก์ชันที่ฉันอธิบายไว้ใน) Imo มันคุ้มค่าเลยแม้แต่พิจารณาความสูงเล็ก ๆ ในไอโฟนเก่า (372px ตามที่คุณพูด)

เป็นไปได้โดยใช้ตัวอย่างด้านล่างที่ฉันรวบรวมไว้ด้วยความช่วยเหลือของงานจาก ( https://gist.github.com/bitinn/1700068a276fb29740a7 ) ที่ไม่ได้ทำงานบน iOS 11:

นี่คือรหัสที่ได้รับการดัดแปลงซึ่งใช้กับ iOS 11.03 ได้โปรดแสดงความคิดเห็นว่ามันใช้งานได้ดีหรือไม่

กุญแจสำคัญคือการเพิ่มขนาดให้กับร่างกายเพื่อให้เบราว์เซอร์สามารถเลื่อนเช่น: ความสูง: การคำนวณ (100% + 40px);

ตัวอย่างเต็มรูปแบบด้านล่าง & ลิงก์เพื่อดูในเบราว์เซอร์ของคุณ (โปรดทดสอบ!)

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

ลิงค์ตัวอย่างแบบสมบูรณ์ที่นี่: https://repos.codehot.tech/misc/ios-webapp-example2.html

เป็นไปได้ที่จะทำให้เว็บแอปพลิเคชั่นทำงานเต็มหน้าจอทั้งใน iOS และ Android เรียกว่า PWAและหลังจากทำงานหนักไปมากมันเป็นหนทางเดียวที่แก้ไขปัญหานี้ได้

PWAs เปิดตัวเลือกที่น่าสนใจมากมายสำหรับการพัฒนาที่ไม่ควรพลาด ฉันได้ทำไปแล้วสองสามข้อลองดูคู่มือสาธารณะและส่วนตัวสำหรับนักออกแบบ (สเปน) และนี่คือคำอธิบายภาษาอังกฤษจากไซต์ CosmicJS

ฉันยังไม่ได้ออกแบบเว็บไซต์สำหรับ iOS แต่จากสิ่งที่ฉันจำได้ว่าเห็นในเซสชัน WWDC และในเอกสารบาร์การค้นหาใน Mobile Safari และแถบนำทางข้ามระบบปฏิบัติการตอนนี้จะปรับขนาดและย่อขนาดเพื่อแสดงเนื้อหาของคุณโดยอัตโนมัติ

คุณสามารถทดสอบสิ่งนี้ใน Safari บน iPhone และสังเกตว่าเมื่อคุณเลื่อนลงเพื่อดูเนื้อหาเพิ่มเติมในหน้าหนึ่งแถบการนำทาง / ค้นหาจะถูกซ่อนโดยอัตโนมัติ

บางทีการทิ้งแถบที่อยู่ / แถบการนำทางตามที่เป็นอยู่และไม่ใช่การสร้างประสบการณ์แบบเต็มหน้าจอเป็นสิ่งที่ดีที่สุด ฉันไม่เห็นว่า Apple จะทำเช่นนั้นในเวลาใด ๆ และส่วนใหญ่จะไม่ควบคุมโดยอัตโนมัติเมื่อแถบที่อยู่แสดง / ซ่อน

แน่นอนว่าคุณกำลังสูญเสียอสังหาริมทรัพย์บนหน้าจอโดยเฉพาะบน iPhone 4 หรือ 4S แต่ดูเหมือนจะไม่มีทางเลือกอื่นในฐานะของ Beta 4