جافا سكريبت - iOS 8 أزال خاصية العرض "minimal-ui"، هل هناك حلول أخرى لـ "الشاشة الكاملة الناعمة"؟

(هذا سؤال متعدد الأجزاء، سأحاول جاهداً تلخيص السيناريو.)

نحن حاليًا نقوم ببناء تطبيق ويب متجاوب (لقارئ الأخبار) يسمح للمستخدمين بالتنقل بين المحتوى المفصول بعلامات التبويب عن طريق السحب، وكذلك التمرير عموديًا داخل كل محتوى مفصول بعلامات التبويب.

نهج شائع للمشكلة هو أن يكون هناك div ملفوف يملأ نافذة المتصفح، وضبط overflow على hidden أو auto، ثم التمرير أفقيًا و/أو عموديًا داخله.

هذا النهج رائع لكنه له عيب رئيسي واحد: نظرًا لأن ارتفاع المستند يساوي تمامًا ارتفاع نافذة المتصفح، فلن يقوم متصفح الهاتف المحمول بإخفاء شريط العنوان/قائمة التنقل.

هناك العديد من الحيل وخصائص عرض الإطار التي تمكننا من الحصول على مساحة شاشة أكبر، لكن لا شيء فعال مثل minimal-ui (المقدمة في iOS 7.1).

وصلتنا الأخبار أمس أن النسخة التجريبية الرابعة من iOS 8 قد أزالت minimal-ui من متصفح Safari المحمول (انظر قسم Webkit في ملاحظات إصدار iOS 8)، مما جعلنا نتساءل:

س1. هل لا يزال من الممكن إخفاء شريط العنوان على متصفح سافاري المحمول؟

على حد علمنا، لم يعد iOS 7 يستجيب لحيلة window.scrollTo، وهذا يشير إلى أنه يتعين علينا التعايش مع مساحة الشاشة الأصغر، ما لم نتبنى تخطيطًا عموديًا أو نستخدم mobile-web-app-capable.

س2. هل لا يزال من الممكن الحصول على تجربة ملء الشاشة الناعمة المماثلة؟

بـالشاشة الكاملة الناعمة أعني حقًا دون استخدام وسم mobile-web-app-capable.

تم بناء تطبيقنا على الويب ليكون قابلاً للوصول، يمكن إضافة أي صفحة كإشارة مرجعية أو مشاركتها باستخدام قائمة المتصفح الأصلية. بإضافة mobile-web-app-capable نمنع المستخدمين من استدعاء هذه القائمة (عندما يتم حفظه على الشاشة الرئيسية)، مما يربك المستخدمين ويثير غضبهم.

كان minimal-ui يمثل الحل الوسط، حيث يُخفي القائمة بشكل افتراضي ولكنه يظل قابلاً للوصول إليه بالنقر -- على الرغم من أن آبل قد أزالته بسبب مخاوف إمكانية الوصول الأخرى (مثل عدم معرفة المستخدمين مكان النقر لتفعيل القائمة).

س3. هل تجربة ملء الشاشة تستحق العناء؟

يبدو أن واجهة برمجة التطبيقات للشاشة الكاملة لن تصل إلى iOS في أي وقت قريب، ولكن حتى لو وصلت، لا أرى كيف سيتم الحفاظ على إمكانية الوصول إلى القائمة (وينطبق نفس الشيء على كروم على أندرويد).

في هذه الحالة، ربما ينبغي علينا الاكتفاء بترك المتصفح المحمول Safari كما هو، وأخذ ارتفاع نافذة العرض في الاعتبار (بالنسبة لجهاز iPhone 5 وما بعده، فهو 460=568 - 108، حيث يشمل 108 شريط النظام، شريط العنوان وقائمة التنقل؛ بالنسبة لجهاز iPhone 4 أو الأقدم، فهو 372).

أود سماع بعض البدائل (بجانب بناء تطبيق أصلي).

الإجابة رقم 1

خاصية العرض minimal-ui لم تعد مدعومة في iOS 8. ومع ذلك، فإن واجهة minimal-ui نفسها لم تختفِ. يمكن للمستخدم الدخول إلى واجهة minimal-ui عن طريق إجراء حركة "اللمس والسحب للأسفل".

هناك عدة شروط مسبقة وعقبات لإدارة حالة العرض، على سبيل المثال لكي يعمل الوضع البسيط UI يجب أن يكون هناك محتوى كافٍ لتمكين المستخدم من التمرير؛ لكي يستمر الوضع البسيط UI يجب تعويض تمرير النافذة عند تحميل الصفحة وبعد تغيير الاتجاه. ومع ذلك، لا توجد طريقة لحساب أبعاد الوضع البسيط UI باستخدام متغير screen، وبالتالي لا توجد طريقة لمعرفة متى يكون المستخدم في الوضع البسيط UI مسبقًا.

هذه الملاحظات هي نتيجة بحث كجزء من تطوير Brim - مدير العرض لنظام iOS 8. التنفيذ النهائي يعمل بالطريقة التالية:

عند تحميل الصفحة، سيقوم Brim بإنشاء عنصر على شكل جهاز مشي. يُستخدم عنصر جهاز المشي لمنح المستخدم مساحة للتمرير. وجود عنصر جهاز المشي يضمن أن المستخدم يمكنه الدخول إلى عرض minimal-ui وأنه يستمر في الوجود إذا قام المستخدم بإعادة تحميل الصفحة أو تغيير اتجاه الجهاز. هذا العنصر غير مرئي للمستخدم طوال الوقت. يحتوي هذا العنصر على المعرف brim-treadmill.

عند تحميل الصفحة أو بعد تغيير الاتجاه، يستخدم Brim أداة Scream لاكتشاف ما إذا كانت الصفحة في وضع العرض البسيط (minimal-ui) (ستظل الصفحة التي كانت في السابق في وضع العرض البسيط وتم إعادة تحميلها في وضع العرض البسيط إذا كان ارتفاع المحتوى أكبر من ارتفاع نافذة العرض).

عندما تكون الصفحة في واجهة المستخدم المصغرة، سيقوم Brim بتعطيل تمرير المستند (يقوم بذلك بطريقة آمنة لا تؤثر على محتويات العنصر الرئيسي). يمنع تعطيل تمرير المستند الخروج عن طريق الخطأ من واجهة المستخدم المصغرة عند التمرير للأعلى. وفقًا لمواصفات iOS 7.1 الأصلية، يؤدي النقر على شريط الأعلى إلى إعادة بقية واجهة المتصفح.

النتيجة النهائية تبدو هكذا:

من أجل التوثيق، وفي حال كنت تفضل كتابة تنفيذك الخاص، يجدر بالذكر أنه لا يمكنك استخدام Scream لاكتشاف ما إذا كان الجهاز في واجهة المستخدم البسيطة مباشرة بعد حدث تغيير الاتجاه لأن أبعاد window لا تعكس الاتجاه الجديد حتى تنتهي حركة الدوران. يجب عليك ربط مستمع بحدث orientationchangeend.

تم تطوير Scream و orientationchangeend كجزء من هذا المشروع.

الإجابة رقم 2

نظرًا لأنه لا توجد طريقة برمجية لتقليد minimal-ui، فقد توصلنا إلى حل بديل مختلف، باستخدام calc() وارتفاع شريط العنوان المعروف في نظام iOS لصالحنا:

ستقوم صفحة العرض التوضيحي التالية (متوفرة أيضًا على Gist، وهناك مزيد من التفاصيل التقنية هناك) بطلب من المستخدم التمرير، مما يؤدي بعد ذلك إلى تفعيل وضع الشاشة الكاملة اللطيف (إخفاء شريط العنوان/القائمة)، حيث يملأ العنوان والمحتوى نافذة العرض الجديدة.

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

الإجابة رقم 3

فقط وداعًا للواجهة البسيطة (في الوقت الحالي)

هذا صحيح، minimal-ui قد يكون مفيدًا وضارًا في الوقت نفسه، وأفترض أن الموازنة الآن تميل لصالح أجهزة iPhone الأحدث والأكبر.

لقد كنت أتعامل مع المشكلة أثناء عملي مع إطار عمل جافاسكريبت الخاص بي لتطبيقات HTML5. بعد العديد من الحلول المحاولة، كل منها له عيوبه، استسلمت لفكرة أن المساحة قد فقدت على أجهزة iPhone الأقدم من 6. بالنظر إلى الوضع، أعتقد أن السلوك الوحيد الصلب والقابل للتنبؤ به هو السلوك المحدد مسبقًا.

باختصار، انتهى بي الأمر منع أي شكل من أشكال واجهة المستخدم البسيطة، لذا على الأقل يكون ارتفاع شاشتي دائمًا هو نفسه وتعرف دائمًا مقدار المساحة الفعلية المتاحة لتطبيقك.

بمساعدة الوقت، سيحظى عدد كافٍ من المستخدمين بمساحة أكبر.

تحرير

كيف أفعل ذلك

هذا مبسط قليلاً، لغرض العرض، لكن يجب أن يعمل بالنسبة لك. بافتراض أن لديك حاوية رئيسية

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

ثم :

1. ثم باستخدام جافاسكريبت، أقوم بتعيين ارتفاع #main إلى ارتفاع النافذة المتاح. هذا يساعد أيضًا في التعامل مع مشكلات التمرير الأخرى الموجودة في كل من iOS و Android. كما يعني أيضًا أنك بحاجة إلى التعامل مع كيفية تحديثه، فقط لاحظ ذلك؛

2. أقوم بحظر التمرير الزائد عند الوصول إلى حدود التمرير. هذا الجزء أعمق قليلاً في الكود الخاص بي، لكن أعتقد أنه يمكنك أيضًا اتباع مبدأ هذا الجواب للوظائف الأساسية. أعتقد أنه قد يومض قليلاً، لكنه سيؤدي المهمة.

شاهد العرض التجريبي (على آيفون)

كملاحظة جانبية: هذا التطبيق أيضًا يمكن حفظه في المفضلة، لأنه يستخدم توجيهًا داخليًا إلى عناوين مشفرة، لكنني أيضًا أضفت رسالة لمستخدمي iOS لإضافته إلى الشاشة الرئيسية. أشعر أن هذه الطريقة تساعد في الولاء والعودة من قبل الزائرين (وبالتالي فإن المساحة المفقودة عادت).