অ্যান্ড্রয়েড এজ-টু-এজ মাইগ্রেশন গাইডে ক্রোম, অ্যান্ড্রয়েড এজ-টু-এজ মাইগ্রেশন গাইডে ক্রোম, অ্যান্ড্রয়েড এজ-টু-এজ মাইগ্রেশন গাইড-এ ক্রোম অ্যান্ড্রয়েড এজ-টু-এজ মাইগ্রেশন গাইড

Bramus

প্রকাশিত: ফেব্রুয়ারী 28, 2025

এজ-টু-এজ একটি অ্যান্ড্রয়েড বৈশিষ্ট্য যা অ্যাপ্লিকেশনগুলিকে অ্যান্ড্রয়েড সিস্টেম বারের পিছনে অঙ্কন করে প্রদর্শনের সম্পূর্ণ প্রস্থ এবং উচ্চতা জুড়ে দিতে দেয়।

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

সর্বত্র বার

অ্যান্ড্রয়েড অপারেটিং সিস্টেম নিজেই প্রদত্ত সিস্টেম বার সহ আসে।

স্ট্যাটাস বার, ক্যাপশন বার এবং নেভিগেশন বারকে একসাথে সিস্টেম বার বলা হয়। তারা ব্যাটারি স্তর, সময় এবং বিজ্ঞপ্তি সতর্কতার মতো গুরুত্বপূর্ণ তথ্য প্রদর্শন করে এবং যেকোনো জায়গা থেকে সরাসরি ডিভাইসের মিথস্ক্রিয়া প্রদান করে।

স্ক্রিনের শীর্ষে আপনি স্ট্যাটাস বারটি খুঁজে পেতে পারেন, যাতে বিজ্ঞপ্তি আইকন এবং সিস্টেম আইকন রয়েছে৷

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

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

ক্রোম এজ টু এজ যায়

আপনি যখন একটি ওয়েবসাইট পরিদর্শন করেন, তখন সেই ওয়েবসাইটটি একটি আয়তক্ষেত্রে উপস্থাপিত হয় যা (লেআউট) ভিউপোর্ট নামে পরিচিত।

Android-এ Chrome-এ, Chrome 135-এর আগে, সেই লেআউট ভিউপোর্টটি উপরের স্ট্যাটাস বার এবং নীচের অঙ্গভঙ্গি নেভিগেশন বারের মধ্যে আঁকা হয়। ক্রোমের অ্যাড্রেস বারের উপস্থিতি (বা এর অভাব) ভিউপোর্টের আকারকে প্রভাবিত করতে পারে, তবে ভিউপোর্ট কখনই উপরের সিস্টেম বার বা নীচের অঙ্গভঙ্গি নেভিগেশন বারে প্রসারিত হবে না।

Chrome 135 থেকে, ভিউপোর্টটিকে Android এর অঙ্গভঙ্গি নেভিগেশন বারে প্রসারিত করার অনুমতি দেওয়া হয়েছে। এটি হল এজ-টু-এজ হিসাবে বর্ণিত আচরণ।

প্রান্ত থেকে প্রান্ত ছাড়া Chrome আচরণ

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

এখানে, Chrome এর ঠিকানা বার প্রত্যাহার বা প্রসারিত হওয়ার সাথে সাথে লেআউট ভিউপোর্টের আকার পরিবর্তিত হয়।

এজ-টু-এজ সহ Chrome আচরণ

Chrome 135 থেকে, Chrome ইঙ্গিত নেভিগেশন বার এলাকায় ভিউপোর্ট প্রসারিত করে নীচের ডিভাইস প্রান্ত পর্যন্ত ওয়েব সামগ্রী আঁকতে পারে।

"চিবুক" সহ গতিশীল প্রান্ত থেকে প্রান্ত

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

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

এই চিবুক আচরণটি Chrome 135 এর পর থেকে নতুন ডিফল্ট Chrome আচরণ।

একটি অপ্ট-ইন করে ডিফল্টরূপে প্রান্ত থেকে প্রান্তে যাওয়া

এজ-টু-এজ-এর জন্য তৈরি করা ওয়েবসাইটগুলি viewport মেটা ট্যাগ টুইক করে তা নির্দেশ করতে পারে। সক্রিয় করা হলে, ভিউপোর্টটি ডিফল্টরূপে নীচের প্রান্ত পর্যন্ত প্রসারিত হবে চিবুকটি দৃশ্যমান না হয়ে।

একটি পৃষ্ঠা নির্দেশ করতে পারে যে এটি viewport মেটা ট্যাগ এবং এর viewport-fit কী ব্যবহার করে এজ-টু-এজ সমর্থন করে।

এজ-টু-এজ অপ্ট-ইন করতে, cover মান অনুযায়ী viewport-fit সেট করুন।

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

MDN-এ viewport-fit বিভিন্ন মান সম্পর্কে আরও জানুন।

অঙ্গভঙ্গি নেভিগেশন বার দ্বারা বাধা পেতে পারে এমন বিষয়বস্তু নিয়ে কাজ করা

এজ-টু-এজ মোডে আপনার এমন যেকোনো বিষয়বস্তু বিবেচনা করা উচিত যা জেসচার নেভিগেশন বার দ্বারা বাধা হতে পারে।

বেশিরভাগ ক্ষেত্রে, আপনাকে কিছু করতে হবে না কারণ নীচের চিবুকটি নিজে থেকেই পথের বাইরে চলে যায়। ব্যবহারকারীরা এখনও আপনার ওয়েবসাইটের সমস্ত বিষয়বস্তুতে পৌঁছতে পারে যেমন তারা আগে করেছিল।

যাইহোক, আপনি যদি ডিফল্টরূপে এজ-টু-এজ যেতে অপ্ট-ইন করেন বা আপনার কাছে এমন একটি উপাদান থাকে যা ভিউপোর্টের নীচে অবস্থান করে, তাহলে আপনাকে সম্ভাব্যভাবে কভার করা সেই সামগ্রীটির জন্য অ্যাকাউন্ট করতে হবে।

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
}

যখন চিবুক উপস্থিত থাকে, তখন বিষয়বস্তু প্রাথমিকভাবে ব্যবহারকারীদের কাছে পৌঁছাতে পারে কিন্তু চিবুক চলে যাওয়ার সাথে সাথে অ্যান্ড্রয়েডের নেভিগেশন বার দ্বারা বাধাপ্রাপ্ত হবে।

প্রশমিত করার জন্য, নিরাপদ এলাকা ইনসেটগুলি ব্যবহার করুন প্রভাবিত উপাদানগুলিকে সর্বদা Android-নেটিভ নীচের অঙ্গভঙ্গি নেভিগেশন বারের উপরে অবস্থান করতে বা তাদের পটভূমিটি সেই এলাকায় প্রসারিত করতে।

নিরাপদ এলাকা ইনসেট

নিরাপদ এলাকা ইনসেট হল চারটি এনভায়রনমেন্ট ভেরিয়েবল যা ভিউপোর্টের প্রান্ত থেকে উপরে, ডান, নীচে এবং বাম ইনসেট দ্বারা একটি আয়তক্ষেত্রকে সংজ্ঞায়িত করে।

এই চারটি মান একত্রিত হয়ে নিরাপদ এলাকা আয়তক্ষেত্র তৈরি করে যেখানে বিষয়বস্তু স্থাপন করা নিরাপদ যাতে এটি Android অঙ্গভঙ্গি নেভিগেশন বারের মতো জিনিস দ্বারা বাধা না পায়।

নিরাপদ এলাকা নীচে ইনসেট ব্যবহার করে

ভিউপোর্টের নীচে অবস্থান করা উপাদানগুলির জন্য, অঙ্গভঙ্গি নেভিগেশন বারের নীচে অবস্থান করা থেকে বিরত রাখতে bottom সম্পত্তির মান হিসাবে safe-area-inset-bottom ব্যবহার করুন৷ safe-area-inset-bottom দ্বারা প্রত্যাবর্তিত মানটি গতিশীলভাবে আপডেট হয়ে যায় যখন চিবুক পথের বাইরে চলে যায়, ফলে নীচের অবস্থানে থাকা উপাদানগুলি সুন্দরভাবে অ্যান্ড্রয়েডের জেসচার নেভিগেশন বারের উপরে থাকে।

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0px);
}

যেমন আপনি চিত্রগুলিতে দেখতে পাচ্ছেন, ফলাফল এখনও নিখুঁত নয়: যখন চিবুকটি পথের বাইরে সরানো হয়, তখন অবশিষ্ট পৃষ্ঠার বিষয়বস্তু অঙ্গভঙ্গি নেভিগেশন বার এলাকায় দৃশ্যমান হয়। কারণ এই অবস্থায় ভিউপোর্ট জেসচার নেভিগেশন বার এলাকায় প্রসারিত হয়।

নীচের-অ্যাঙ্কর করা বিষয়বস্তুর নীচে আঁকা হওয়া থেকে আটকাতে, একটি সাধারণভাবে ব্যবহৃত পদ্ধতি হল padding-bottom safe-area-inset-bottom সেট করা। এইভাবে নীচের নোঙ্গর করা উপাদানটি স্বয়ংক্রিয়ভাবে বৃদ্ধি পায় যখন চিবুক নিজেকে লুকিয়ে রাখে। যদিও এটি কাজ করে, এই পদ্ধতিটি সুপারিশ করা হয় না কারণ এর ফলে লেআউট থ্র্যাশিং হয় যখন চিবুকটি পথের বাইরে চলে যায়।

padding নিরাপদ-এরিয়া-ইনসেট মান সেট করবেন না।

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px); /* 🛑 Don't do this, as it causes layout thrashing. */
}

নিরাপদ এলাকা নীচে ইনসেট এবং নিরাপদ এলাকা নীচে সর্বোচ্চ ইনসেট ব্যবহার করে

পরিবর্তে, প্রস্তাবিত পদ্ধতি হল safe-area-inset-bottom এবং safe-area-max-inset-bottom এর সংমিশ্রণ ব্যবহার করা। ডায়নামিক safe-area-inset-bottom থেকে ভিন্ন যা চিবুক পথ থেকে সরে যাওয়ার সাথে সাথে গতিশীলভাবে আপডেট হয়, safe-area-max-inset-bottom safe-area-inset-bottom সর্বাধিক মান উপস্থাপন করে।

নিচের-অ্যাঙ্কর করা উপাদানটিকে সামনের দিকে বাড়াতে এই safe-area-max-inset-bottom ব্যবহার করুন এবং উপাদানটিকে নিচে টানতে safe-area-inset-bottom সাথে একত্রিত করুন যাতে এটি চিবুকের পিছনে বসে যায়।

safe-area-max-inset-bottom সাথে সংমিশ্রণে safe-area-inset-bottom ব্যবহার করুন

:root {
  --safe-area-max-inset-bottom: env(safe-area-max-inset-bottom, 36px);
  --bottom-bar-height: 50px;
}

.stuck-to-the-bottom-of-the-viewport {
  position: fixed;
  bottom: 0;
  height: var(--bottom-bar-height);
  padding-bottom: var(--safe-area-max-inset-bottom);
  bottom: calc(env(safe-area-inset-bottom, 0px) - var(--safe-area-max-inset-bottom));
}

body {
  padding-bottom: calc(var(--bottom-bar-height) + var(--safe-area-max-inset-bottom));
}

একটি লাইভ ডেমো চেষ্টা করুন

চাক্ষুষ ফলাফল padding-bottom: env(safe-area-inset-bottom, 0px); পন্থা কিন্তু এটা অনেক ভালো পারফর্ম করে। কারণ চিবুক সরে যাওয়ার সাথে সাথে bottom জন্য শুধুমাত্র গণনা করা মান পরিবর্তন করতে হবে, কোন লেআউট থ্র্যাশিং ঘটে না।

Chrome 135 এর আগে এজ-টু-এজ ব্যবহার করে দেখুন

এটির সর্বজনীন স্থিতিশীল প্রকাশের আগে এজ-টু-এজ চেষ্টা করার জন্য, আপনাকে chrome://flags মাধ্যমে বেশ কয়েকটি Chrome বৈশিষ্ট্য পতাকা সক্ষম করতে হবে:

• EdgeToEdgeBottomChin (ঐচ্ছিকভাবে এটিকে "সক্ষম ডিবাগ" এ সেট করলে অর্ধেক চিবুক গোলাপী রঙে রঙ করবে যাতে এটিকে অন্য UI থেকে আরও স্পষ্টভাবে আলাদা করা যায়)
• DrawCutOutEdgeToEdge
• BottomBrowserControlsRefactor ("সক্ষম" এ সেট করবেন না কিন্তু "সক্ষম ডিসপ্যাচ yOffset" এ সেট করুন)
• DynamicSafeAreaInsets
• DynamicSafeAreaInsetsOnScroll
• EdgeToEdgeWebOptIn
• DrawKeyNativeEdgeToEdge
• EdgeToEdgeSafeAreaConstraint ("সক্ষম" এ সেট করবেন না কিন্তু "সক্ষম স্ক্রোলযোগ্য পরিবর্তন" এ সেট করুন)

নিশ্চিত করুন যে নিম্নলিখিত পতাকাগুলি সক্ষম করা নেই :

• DrawNativeEdgeToEdge
• EdgeToEdgeEverywhere

ক্রোম দুবার রিস্টার্ট করুন।

আমরা আপনার মতামত চাই

Chrome এবং এর প্রান্ত থেকে প্রান্ত বাস্তবায়নের বিষয়ে আপনার মতামত থাকলে, অনুগ্রহ করে "UI > Browser > Mobile > EdgeToEdge" উপাদানে একটি Chromium বাগ ফাইল করে আমাদের সাথে যোগাযোগ করুন। আমরা আপনার প্রতিক্রিয়া প্রশংসা করি.