আইওএস 8 অপসারণ করা হয়েছে "মিনিমেল-ইউআই" ভিউপোর্ট সম্পত্তি, অন্য কোনও "নরম ফুলস্ক্রিন" সমাধান আছে?

Question

(এটি একটি বহু অংশের প্রশ্ন, আমি দৃশ্যের সংক্ষিপ্ত বিবরণ দেওয়ার জন্য যথাসাধ্য চেষ্টা করব))

আমরা বর্তমানে একটি প্রতিক্রিয়াশীল ওয়েব অ্যাপ (নিউজ রিডার) তৈরি করছি যা ব্যবহারকারীদের ট্যাবড সামগ্রীর মধ্যে সোয়াইপ করার পাশাপাশি প্রতিটি ট্যাবযুক্ত সামগ্রীর অভ্যন্তরে উল্লম্বভাবে স্ক্রোল করার অনুমতি দেয়।

সমস্যার একটি সাধারণ পদ্ধতির মধ্যে একটি মোড়ক থাকে divযা ব্রাউজারের ভিউপোর্টটি পূরণ করে, সেট overflowকরে hiddenবা সেট করে auto, তারপরে অনুভূমিকভাবে এবং / অথবা উল্লম্বভাবে স্ক্রোল করে।

এই পদ্ধতির দুর্দান্ত তবে একটি প্রধান অসুবিধা রয়েছে: যেহেতু নথির উচ্চতা ব্রাউজার ভিউপোর্টের মতো ঠিক তাই মোবাইল ব্রাউজারটি ঠিকানা বার / নেভিগেশন মেনুটি গোপন করবে না ।

এমন অনেক হ্যাক এবং ভিউপোর্টের বৈশিষ্ট্য রয়েছে যা আমাদের আরও স্ক্রিন রিয়েল এস্টেট পেতে সক্ষম করে তবে কোনওটিই minimal-ui(আইওএস .1.১ এ প্রবর্তিত) মতো কার্যকর নয় ।

গতকাল খবর এসেছে যে আইওএস 8 বিটা 4 minimal-uiমোবাইল সাফারি থেকে সরিয়ে নিয়েছে ( আইওএস 8 এর রিলিজ নোটের ওয়েবকিট বিভাগ দেখুন ), যা আমাদের অবাক করে দিয়েছিল:

চতুর্থাংশ 1। মোবাইল সাফারিতে ঠিকানা বারটি এখনও লুকানো সম্ভব?

যতদূর আমরা জানি, আইওএস 7 আরwindow.scrollTo হ্যাকের প্রতিক্রিয়া জানায় না , এটি প্রস্তাব দেয় যে আমরা যদি উল্লম্ব বিন্যাস বা ব্যবহার না করি তবে আমাদের ছোট পর্দার জায়গার সাথেই বাঁচতে হবে mobile-web-app-capable।

Q2 এর। এখনও কি একই ধরণের নরম ফুলস্ক্রিন অভিজ্ঞতা পাওয়া সম্ভব?

দ্বারা নরম পর্দা জুড়ে প্রদর্শন আমি সত্যিই ব্যবহার না করেই অর্থ mobile-web-app-capableমেটা ট্যাগটি।

আমাদের ওয়েব অ্যাপ্লিকেশনটি অ্যাক্সেসযোগ্য হওয়ার জন্য নির্মিত হয়েছে, যে কোনও পৃষ্ঠা নেটিভ ব্রাউজার মেনু ব্যবহার করে বুকমার্ক বা ভাগ করা যায়। যুক্ত করে mobile-web-app-capableআমরা ব্যবহারকারীদের এ জাতীয় মেনু (যখন এটি হোমস্ক্রিনে সংরক্ষণ করা হয়) চালনা করা থেকে বিরত করি, যা ব্যবহারকারীদের বিভ্রান্ত করে এবং বিরোধী করে।

minimal-uiমিডল-গ্রাউন্ড হিসাবে ব্যবহৃত হত, মেনুটি ডিফল্টরূপে আড়াল করে তবে এটিকে একটি ট্যাপ দিয়ে অ্যাক্সেসযোগ্য রাখে - যদিও অ্যাপল অন্যান্য অ্যাক্সেসযোগ্যতার উদ্বেগের কারণে এটি মুছে ফেলেছে (যেমন ব্যবহারকারীরা মেনুটি সক্রিয় করতে কোথায় ট্যাপ করবেন তা জানেন না)।

চতুর্থাংশ 3। একটি ফুলস্ক্রিন অভিজ্ঞতা কি ঝামেলার মতো?

দেখে মনে হবে একটি পূর্ণস্ক্রিন এপিআই শীঘ্রই খুব শীঘ্রই আইওএস এ আসবে না, তবে তা হ'ল, মেনুটি কীভাবে অ্যাক্সেসযোগ্য রাখা হবে তা আমি দেখতে পাই না (অ্যান্ড্রয়েডের ক্রোমের ক্ষেত্রেও এটি যায়)।

এই ক্ষেত্রে, আমাদের কেবল মোবাইল সাফারিটি যেমন আছে তেমন ছেড়ে দেওয়া উচিত এবং ভিউপোর্টের উচ্চতার জন্য অ্যাকাউন্ট করা উচিত (আইফোন 5+ এর জন্য এটি 460 = 568 - 108, যেখানে 108 এ ওএস বার, অ্যাড্রেস বার এবং নেভিগেশন মেনু অন্তর্ভুক্ত করে; আইফোন 4 বা জন্য পুরানো, এটি 372)।

কিছু বিকল্প শুনতে (দেশীয় অ্যাপ্লিকেশন তৈরি করার পাশাপাশি) শুনতে পছন্দ করবে।

Comments

দেখতে stackoverflow.com/questions/18793072/... কেন ন্যূনতম-ui এ কিছু অ্যাপ্লিকেশনের অত্যন্ত গুরুত্বপূর্ণ হতে পারে আরও বিশদের জন্য।

— বিটিন

আমি আইওএস on-তেও একই সমস্যায় পড়েছি, যেহেতু আমরা সোয়াইপ / স্ক্রোল ইভেন্টগুলি সহ একটি ওয়েব অ্যাপ তৈরি করতে চাইছি, তবে iOS8 বিটা 4 এবং .. এ স্ক্রোল ইভেন্টগুলি পরীক্ষা করে দেখলাম। তারা কাজ করে। ios8-scrol-events.heroku.com নিশ্চিত না যে এটি যদি আদৌ সহায়তা করে তবে .. আপনার জন্য এটি চলছে।

— ডেভিন ম্যাকিনিস

একই সমস্যায় দৌড়ে গেল। এই মুহূর্তে কেবল জাভাস্ক্রিপ্ট "ফিক্স", যেমন নীচের ক্যালক () ফাংশনটির একমাত্র উত্তর। আপনি যদি আরও ভাল সিদ্ধান্ত জানেন তবে দয়া করে এই থ্রেডটি আপডেট করুন। শুভেচ্ছান্তে.

— ইলেকসান্ডার

Answer 1

নূন্যতম-ইউআই ভিউপোর্টের সম্পত্তি আর আইওএস ৮-তে সমর্থিত নয় তবে ন্যূনতম-ইউআই নিজেই যায়নি। ব্যবহারকারী "টাচ-ড্র্যাগ ডাউন" অঙ্গভঙ্গি দিয়ে ন্যূনতম-ইউআইতে প্রবেশ করতে পারে।

দেখার স্থিতি পরিচালনা করতে বেশ কয়েকটি পূর্ব শর্ত এবং প্রতিবন্ধকতা রয়েছে, যেমন ন্যূনতম-ইউআই কাজ করার জন্য, ব্যবহারকারীকে স্ক্রোল করতে সক্ষম করার জন্য পর্যাপ্ত সামগ্রী থাকতে হবে; ন্যূনতম- ui অব্যাহত রাখার জন্য, উইন্ডো স্ক্রোলটি পৃষ্ঠা লোড এবং ওরিয়েন্টেশন পরিবর্তনের পরে অফসেট করা আবশ্যক। তবে ভেরিয়েবলটি ব্যবহার করে ন্যূনতম-ইউআইয়ের মাত্রাগুলি গণনা করারscreen কোনও উপায় নেই এবং এভাবে ব্যবহারকারী যখন আগে ন্যূনতম-ইউআই থাকে তখন কোনও উপায় বলে না।

এই পর্যবেক্ষণগুলি ব্রিম বিকাশের অংশ হিসাবে গবেষণার ফলাফল - আইওএস 8 এর জন্য পরিচালক দেখুন । শেষের বাস্তবায়ন নিম্নলিখিত পদ্ধতিতে কাজ করে:

পৃষ্ঠাটি লোড হয়ে গেলে, ব্রিম একটি ট্রেডমিল উপাদান তৈরি করবে। ট্রেডমিল উপাদানটি ব্যবহারকারীকে স্ক্রোল দেওয়ার জন্য ব্যবহৃত হয়। ট্রেডমিল উপাদানের উপস্থিতি নিশ্চিত করে যে ব্যবহারকারী ন্যূনতম-ইউআই ভিউতে প্রবেশ করতে পারে এবং ব্যবহারকারী যদি পৃষ্ঠাটি পুনরায় লোড করে বা ডিভাইস অভিমুখীকরণ পরিবর্তন করে তবে তা অবিরত থাকবে। এটি পুরো সময় ব্যবহারকারীর কাছে অদৃশ্য। এই উপাদানটির আইডি রয়েছে brim-treadmill।

পৃষ্ঠাটি লোড করার পরে বা ওরিয়েন্টেশন পরিবর্তন করার পরে, ব্রিম পৃষ্ঠাটি ন্যূনতম-ইউআই ভিউতে রয়েছে কিনা তা সনাক্ত করতে স্ক্রিম ব্যবহার করছে (যে পৃষ্ঠাটি আগে ন্যূনতম-ইউআইতে ছিল এবং পুনরায় লোড করা হয়েছে এটি যদি ন্যূনতম-ইউআইতে থাকে তবে যদি সামগ্রীর উচ্চতা হয় ভিউপোর্টের উচ্চতার চেয়ে বড়)।

পৃষ্ঠাটি ন্যূনতম-ইউআইতে থাকা অবস্থায় ব্রিম নথির স্ক্রোলিং অক্ষম করবে (এটি সুরক্ষিতভাবে এটি করে যা মূল উপাদানটির বিষয়বস্তুগুলিকে প্রভাবিত করে না)। ডকুমেন্ট স্ক্রোলিং অক্ষম করা উপরের দিকে স্ক্রোল করার সময় ঘটনাক্রমে ন্যূনতম-ইউআই ছাড়তে বাধা দেয়। মূল আইওএস 7.1 স্পেস অনুসারে, শীর্ষ বারটি আলতো চাপলে বাকী ক্রোম ফিরে আসে।

শেষ ফলাফলটি এরকম দেখাচ্ছে:

ডকুমেন্টেশনের খাতিরে, এবং আপনি নিজের প্রয়োগটি লিখতে পছন্দ করেন, তবে লক্ষণীয় যে আপনি ডিভাইসটি ন্যূনতম-ইউআইতে সরাসরি অভিমুখীকরণ ইভেন্টের পরে রয়েছে কিনা তা সনাক্ত করতে স্ক্রিম ব্যবহার করতে পারবেন না কারণ মাত্রাগুলি নতুন অভিমুখকে প্রতিফলিত করে না যতক্ষণ না পর্যন্ত ঘূর্ণন অ্যানিমেশন শেষ হয়েছে। ওরিয়েন্টেশন বিনিময়ের ইভেন্টে আপনাকে শ্রোতাদের সংযুক্ত করতে হবে ।window

এই প্রকল্পের অংশ হিসাবে চিৎকার এবং ওরিয়েন্টেশন বদলানো হয়েছে।

Comments

এটি আমার আসল উত্তরের চেয়ে আরও বিস্তৃত, এমনকি আরও ভাল সমাধান না আসা পর্যন্ত নতুন উত্তর হিসাবে চিহ্নিত হয়েছে :)

— বিটিন

ভালই লাগছে! আমি কি প্রাথমিক স্ক্রল ছাড়া ন্যূনতম-ইউআইকে বাধ্য করতে পারি?

— INT

এটি আসলেই শেষের গল্প নয়। আমি এইচটিএমএল-তে একটি গেম ডেভেলপার এবং আইওএস .1.১-এ ন্যূনতম-ইউআই ঠিক কাজ করেছেন - পুরোপুরি স্ক্রিন চালিত কোনও অ্যাপ্লিকেশন পাওয়ার একমাত্র উপায় এটি ছিল এবং একই সাথে পর্দার নীচে স্পর্শ করতে সক্ষম হয়েছিলেন। পৃষ্ঠা swiping সঙ্গে সলিউশন সুন্দর, কিন্তু না ভাল যথেষ্ট :( অ্যাপল, আমরা গেম জন্য পূর্ণ পর্দায় API- এর সঠিক বাস্তবায়ন প্রয়োজন, দয়া করে।

— পেত্র আরবান

@ পেটার: আমি আর একমত হতে পারি না। যখন এই ফিক্সটি 7.1-এ ঘোষণা করা হয়েছিল আমরা দ্রুতই একটি নতুন চেকআউট ক্রয় প্রবাহ চালু করলাম যা প্রাথমিক সিটিএটিকে পর্দার নীচে পিন করেছে .. এটি কাজ করেছে এবং দুর্দান্ত রূপান্তরিত হয়েছে! এটি খুব "দেশীয়" এবং নির্বিঘ্ন অনুভূত হয়েছিল। যা আমি মনে করি সঠিক সমস্যা। আপনি যদি এটির বিষয়ে চিন্তা করেন তবে ওয়েব অ্যাপ্লিকেশনগুলিকে স্থানীয় মনে করার পক্ষে এটি অ্যাপলের সেরা আগ্রহ নয়। এটি প্রকৃতপক্ষে তাদের অ্যাপ স্টোরের একচেটিয়াকরণের সাথে সরাসরি আগ্রহের দ্বন্দ্ব। এটি হ'ল আইএমও, একমাত্র বৈধ কারণ কেন এমন কোনও বৈশিষ্ট্য যা এত বেশি জ্ঞান দেয় তা স্থির করা হয়েছিল এবং তারপরে ইচ্ছাকৃতভাবে অপসারণ করা হয়েছিল। # মাই 2 সেন্টস :)

— হোসে ব্রাউন

@ পেটারউরবান আমি দৃ am় প্রতিজ্ঞ যে অ্যাপল আপনাকে ওয়েবের মাধ্যমে পরিবেশন করার অনুমতি দেওয়ার চেয়ে ফোনগ্যাপ অ্যাপ হিসাবে আপনার গেমটি প্রকাশ করতে পছন্দ করবে। সাফারিগুলির জন্য অ্যাড ব্লকারদের মঞ্জুরি দেওয়ার তাদের সাম্প্রতিক সিদ্ধান্ত এই ধারণাটিকে সীমাবদ্ধ করে।

— প্যাট্রিক গাউনসন

Answer 2

যেহেতু নকল করার কোনও প্রোগ্রামিক উপায় নেই minimal-ui, তাই আমরা calc()আমাদের সুবিধার জন্য আইওএস ঠিকানা বারের উচ্চতা ব্যবহার করে এবং ज्ञিত :

নিম্নলিখিত ডেমো পৃষ্ঠাটি (সংক্ষিপ্তসারে উপলভ্য, সেখানে আরও প্রযুক্তিগত বিশদগুলি ) ব্যবহারকারীকে স্ক্রোল করতে অনুরোধ জানাবে, যা নরম-পূর্ণস্ক্রিনটিকে (আড়াল ঠিকানা বার / মেনু লুকান) ট্রিগার করে, যেখানে শিরোনাম এবং সামগ্রী নতুন ভিউপোর্টটি পূরণ করে।

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

Answer 3

কেবলমাত্র ন্যূনতম-ইউআইকে বিদায় জানাতে (এখনই)

এটি সত্য, minimal-uiকার্যকর এবং ক্ষতিকারক উভয়ই হতে পারে, এবং আমি মনে করি যে বাণিজ্যটি বন্ধ করার ক্ষেত্রে আরও নতুন ভারসাম্য রয়েছে, আরও বড় আইফোনের পক্ষে।

এইচটিএমএল 5 অ্যাপ্লিকেশনগুলির জন্য আমার জেএস ফ্রেমওয়ার্কের সাথে কাজ করার সময় আমি বিষয়টি নিয়ে কাজ করছি। অনেকগুলি চেষ্টা করার সমাধানের পরে, প্রতিটি তাদের ত্রুটিগুলি নিয়ে, আমি space এর চেয়ে আগের আইফোনগুলিতে হারিয়ে যাওয়া স্থান বিবেচনা করে আত্মসমর্পণ করেছিলাম। পরিস্থিতিটি বিবেচনা করে, আমি মনে করি যে একমাত্র দৃ and় এবং অনুমানযোগ্য আচরণটি পূর্ব নির্ধারিত একটি।

সংক্ষেপে, আমি কোনও রূপ ন্যূনতম-ইউআই রোধ করতে পেরেছি , তাই আমার স্ক্রিনের উচ্চতা সর্বদা একই থাকে এবং আপনার অ্যাপটির জন্য আপনার প্রকৃত স্থানটি কী তা আপনি সর্বদা জানেন।

সময়ের সহায়তায় পর্যাপ্ত ব্যবহারকারীদের আরও বেশি জায়গা থাকবে।

---

সম্পাদনা

আমি এটা কিভাবে

ডেমো উদ্দেশ্যে এটি সামান্য সরল, তবে আপনার পক্ষে কাজ করা উচিত। ধরে নিচ্ছি আপনার কাছে একটি প্রধান ধারক রয়েছে

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

তারপর:

1. তারপরে js এর সাহায্যে আমি #mainউইন্ডোটির উপলব্ধ উচ্চতাতে উচ্চতা নির্ধারণ করি। এটি আইওএস এবং অ্যান্ড্রয়েড উভয়ই পাওয়া অন্যান্য স্ক্রোলিং বাগগুলি মোকাবেলা করতে সহায়তা করে। এর অর্থ হ'ল আপনাকে কীভাবে এটি আপডেট করতে হবে তা মোকাবেলা করতে হবে, কেবল এটি নোট করুন;

2. স্ক্রোলের সীমানায় পৌঁছে আমি ওভার-স্ক্রোলিংকে ব্লক করি। এটি আমার কোডে কিছুটা গভীর, তবে আমি মনে করি আপনি বুনিয়াদি কার্যকারিতার জন্য এই উত্তরটির নীতিটিও অনুসরণ করতে পারেন । আমি মনে করি এটি কিছুটা ফ্লিকার করতে পারে তবে কাজটি করবে।

---

ডেমোটি দেখুন (একটি আইফোনে)

সাইডেনোট হিসাবে: এই অ্যাপ্লিকেশনটিও বুকমার্কযোগ্য, কারণ এটি হ্যাশ ঠিকানাগুলিতে অভ্যন্তরীণ রাউটিং ব্যবহার করে, তবে আমি ঘরে ঘরে যুক্ত করার জন্য একটি প্রম্পট আইওএস ব্যবহারকারীদেরও যুক্ত করেছি। আমি অনুভব করি যে এই উপায়টি বিশ্বস্ততা এবং প্রত্যাবর্তনকারী দর্শকদের (এবং সুতরাং হারিয়ে যাওয়া জায়গা ফিরে এসেছে) সহায়তা করে।

Comments

ন্যূনতম-ইউআই অক্ষম করা আমার কাছে খুব যুক্তিসঙ্গত বলে মনে হয়। দয়া করে কিভাবে এটি করার জন্য সংক্ষিপ্ত বিবরণ অন্তর্ভুক্ত করুন!

— ইস্তভান পলিংকস

আপনি ঠিক বলেছেন, আমি কীভাবে কিছুটা যুক্ত করেছি। আরও অনেক উপায় কাজ করবে।

— ফ্রান্সেসকো ফ্রেপ্পোর্টি

আমার আইফোন 5 অনুযায়ী আপনার ডেমো

— iOS8 এ

আমাকে জানানোর জন্য আপনাকে ধন্যবাদ, এটি অবশ্যই কিছু আপডেট হতে হবে কারণ এটি কাজ করত। তুমি কি সাফারি? এটি ঠিক কাজ করে না মানে কী কাজ করে না?

— ফ্রান্সেস্কো ফ্রেপ্পোর্টি

Answer 4

এটির সমাধানের সবচেয়ে সহজ উপায়টি হ'ল যে কোনও অনুরোধের জন্য যেখানে শরীরের এজেন্ট আইফোন ছিল তার জন্য শরীর এবং এইচটিএমএল উপাদানগুলির উচ্চতা 100.1% এ সেট করা। এটি কেবল ল্যান্ডস্কেপ মোডে কাজ করে, তবে আমার যা প্রয়োজন তা সবই ঠিক করে।

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

এটি https://www.360jungle.com/virtual-tour/25 এ দেখুন

Comments

ধন্যবাদ @ স্টেফেন উচ্চতা: 100.1% আমাকে সহায়তা করেছে। যাইহোক, আমি যখন আইফোন (আইওএস ১১.১.১) সাফারিতে jun 360০ জুনগঞ্জল / ভার্চুয়াল-ট্যুর / ২৫ খুললাম এবং নীচে বোতামগুলি ক্লিক করলাম তখন ঠিকানা এবং সরঞ্জাম বারটি উপস্থিত হবে। এটি হ'ল কারণ বোতামগুলি প্রদর্শনের শেষের খুব কাছে। আমার ধারণা এটি মোবাইল মোডে অন্য কোথাও সরিয়ে নেওয়া ভাল।

— T 21wa

Answer 5

এখানে মূল সমস্যাটি মনে হচ্ছে আইওএস 8 সাফারি যদি ভিউপোর্টের চেয়ে সমান বা কম হয় তবে নীচে স্ক্রোল করার সময় ঠিকানা বারটি আড়াল করবে না।

আপনি ইতিমধ্যে খুঁজে পেয়েছেন যে, নীচে কিছু প্যাডিং যুক্ত করা এই সমস্যাটির চারপাশে আসে:

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

উপরের সিএসএস শর্তসাপেক্ষে প্রয়োগ করা উচিত, উদাহরণস্বরূপ ইউএ স্নিফিংয়ের সাথে একটি gt-ios8ক্লাস যুক্ত করা উচিত <html>।

Comments

এই জেএস ঠিক কী করে?

— বেন সিনক্লেয়ার

যদি আপনি উল্লেখ করে থাকেন তবে scrollIntoViewIfNeededএটি scrollIntoView( বিকাশকারী.মোজিলা.আর.ইন- ইউএস / ডকস / ওয়েবে / এপিআই / এলিমেন্ট.স্ক্রোলআইটোভিউ ) এর একটি মানহীন ব্যয় । নামটি থেকেই বোঝা যাচ্ছে যে পদ্ধতিটি উপাদানটিকে ভিউতে স্ক্রোল করে। trueপ্যারামিটারটি উপাদানটির শীর্ষের সাথে ভিউ সারিবদ্ধ করতে বলে। এটি কার্যকরভাবে আপনাকে স্ক্রোলিং থেকে রোধ করা উচিত। বাস্তবায়ন ত্রুটিযুক্ত যদিও।

— গজুস

Answer 6

আমি আমার মতামত মন্তব্য / আংশিক উত্তর / ভাগ করতে চাই। আমি আমার একটি বড় আসন্ন প্রকল্পের জন্য ওভারফ্লো-ওয়াই: স্ক্রোল কৌশলটি ব্যবহার করছি। এটি ব্যবহারের দুটি প্রধান সুবিধা রয়েছে।

ক) আপনি পর্দার নীচ থেকে অ্যাকশন বোতাম সহ একটি ড্রয়ার ব্যবহার করতে পারেন; যদি দস্তাবেজ স্ক্রলগুলি এবং নীচের বারটি অদৃশ্য হয়ে যায়, স্ক্রিনের নীচে অবস্থিত একটি বোতামে আলতো চাপলে প্রথমে নীচের অংশটি প্রদর্শিত হবে এবং তারপরে ক্লিকযোগ্য হবে। এছাড়াও, এই জিনিসটি যেভাবে কাজ করে, সেই মডেলগুলির সাথে সমস্যা সৃষ্টি করে যার খুব নীচে বোতাম রয়েছে।

খ) একটি ওভারফ্লাউন উপাদান ব্যবহার করার সময়, প্রধান CSS পরিবর্তনের ক্ষেত্রে কেবল পুনরায় রঙ করা জিনিসগুলি দেখা যায় এমন পর্দার মধ্যে রয়েছে। ফ্লাইয়ের একাধিক উপাদানগুলির সিএসএস পরিবর্তন করতে জাভাস্ক্রিপ্ট ব্যবহার করার সময় এটি আমাকে বিশাল পারফরম্যান্সের উত্সাহ দেয়। উদাহরণস্বরূপ, আপনার যদি 20 টি উপাদানগুলির পুনরায় রঙ করার প্রয়োজনের একটি তালিকা থাকে এবং কেবলমাত্র দুটিই ওভারফ্লাউন উপাদানটিতে অন-স্ক্রিনে থাকে, কেবলমাত্র যখন তখন স্ক্রল করার সময় বাকিগুলি পুনরায় রঙ করা হয়। এটি ছাড়া সমস্ত 20 উপাদান পুনরায় রঙ করা হয়।

.. অবশ্যই এটি প্রকল্পের উপর নির্ভর করে এবং যদি আপনার উল্লেখ করা কার্যকারিতার কোনও প্রয়োজন হয়। আমি জি এর উপরে বর্ণিত কার্যকারিতাটি ব্যবহার করতে গুগল জিমেইলের জন্য ওভারফ্লাউন উপাদানগুলি ব্যবহার করে)। তবে, এটি পুরানো আইফোনগুলির ছোট উচ্চতা বিবেচনা করে (372 পিক্স যেমন আপনি বলেছিলেন) মূল্যবান।

Answer 7

এটি সম্ভব, নীচের উদাহরণের মতো এমন কিছু ব্যবহার করে যা আমি ( https://gist.github.com/bitinn/1700068a276fb29740a7 ) থেকে কাজের সাহায্যে একসাথে রেখেছি যা আইওএস 11 এ পুরোপুরি কাজ করেনি:

আইওএস 11.03 এ কাজ করে এমন একটি সংশোধিত কোড এখানে দেওয়া হয়েছে, দয়া করে মন্তব্য করুন এটি আপনার পক্ষে কাজ করে কিনা।

কীটি BODY তে কিছু আকার যুক্ত করছে যাতে ব্রাউজারটি স্ক্রোল করতে পারে, যেমন: উচ্চতা: গণনা (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

Answer 8

আইওএস এবং অ্যান্ড্রয়েড উভয় ক্ষেত্রেই একটি ওয়েব অ্যাপ্লিকেশন পূর্ণ স্ক্রিনে চলমান পাওয়া সম্ভব, একে পিডাব্লুএ বলা হয় এবং মুচা কঠোর পরিশ্রমের পরে, এই সমস্যাটির একমাত্র উপায় ছিল।

পিডব্লিউএগুলি বিকাশের জন্য বেশ কয়েকটি আকর্ষণীয় বিকল্প খোলে যা এড়ানো উচিত নয়। আমি ইতিমধ্যে একটি দম্পতি তৈরি করেছি, ডিজাইনার (স্প্যানিশ) জন্য এই সরকারী এবং ব্যক্তিগত টেন্ডার ম্যানুয়ালটি দেখুন । এবং এখানে কসমিকজেএস সাইট থেকে একটি ইংরেজি ব্যাখ্যা দেওয়া হয়েছে

Answer 9

আমি আইওএসের জন্য ওয়েব ডিজাইন করিনি তবে ডাব্লুডাব্লুডিসি সেশনগুলিতে এবং ডকুমেন্টেশনে যা দেখেছি তা থেকে, মোবাইল সাফারিতে অনুসন্ধান বার এবং ওএস জুড়ে নেভিগেশন বারগুলি এখন স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করবে এবং আপনার আরও বেশি সামগ্রী দেখানোর জন্য সঙ্কুচিত হবে।

আপনি সাফারিতে এটি একটি আইফোনে পরীক্ষা করে দেখতে পারেন যে আপনি যখন কোনও পৃষ্ঠায় আরও সামগ্রী দেখতে নীচে স্ক্রোল করেন, নেভিগেশন / অনুসন্ধান বারটি স্বয়ংক্রিয়ভাবে লুকানো থাকে।

সম্ভবত অ্যাড্রেস বার / নেভিগেশন বারটি যেমন রেখেছেন এবং একটি পূর্ণ-স্ক্রিনের অভিজ্ঞতা তৈরি না করা সবচেয়ে ভাল। আমি অ্যাপলকে তাড়াতাড়ি যে কোনও সময় এটি করতে দেখছি না। এবং ঠিকানা বার যখন দেখায় / লুকিয়ে থাকে তখন সর্বাধিক এগুলি স্বয়ংক্রিয়ভাবে নিয়ন্ত্রণ করা হয় না।

অবশ্যই, আপনি বিশেষত আইফোন 4 বা 4 এস-তে স্ক্রিন রিয়েল এস্টেট হারাচ্ছেন, তবে বিটা 4 এর বিকল্প বলে মনে হচ্ছে না।

Comments

আমি iOS7 + এর এই বৈশিষ্ট্যটি জানতাম, তবে উপরের আমার ব্যাখ্যাটি দেখুন: যেহেতু নথির উচ্চতা ব্রাউজার ভিউপোর্টের মতো ঠিক তাই মোবাইল ব্রাউজারটি ঠিকানা দণ্ড / নেভিগেশন মেনুটি গোপন করবে না , কারণ নথি-স্তরের কোনও স্ক্রোল ঘটে না।

— বিটিন

এটি এখন সীমাবদ্ধতার কিছু হতে পারে যে বিটা 4 বৈশিষ্ট্যটি সরিয়ে নিয়েছে। এটি সম্ভব এবং সম্ভবত যে অ্যাপল অ্যাড্রেস বারটি স্বয়ংক্রিয়ভাবে নিয়ন্ত্রণ করছে এবং বিকাশকারীদের এটি অ্যাক্সেস করা থেকে বিরত রাখছে।

— আইফেলি

I haven't done web design for iOS- আপনি যদি ওয়েব ডিজাইন করেন তবে আপনি এটি প্রতিটি প্ল্যাটফর্মের জন্য করেন। কারণ ওয়েব প্রতিটি প্ল্যাটফর্মে রয়েছে।

— সমস্যাগুলি

@ সুমিত আমি জানি যে ওয়েবে কাজ করা সর্বজনীন, তবে প্রতিটি ব্রাউজার এবং তাদের অন্তর্নিহিত কাঠামোর নির্দিষ্ট সিএসএস বৈশিষ্ট্য রয়েছে। সুতরাং Chrome এর সাফারি এবং ফায়ারফক্স এবং বিপরীতে কিছু বৈশিষ্ট্য অনুপলব্ধ থাকতে পারে।

— আইফেলি 17