Android-এ Chrome-এর এজ-টু-এজ মাইগ্রেশন গাইড

Bramus

প্রকাশিত: ২৮ ফেব্রুয়ারি, ২০২৫

এজ-টু-এজ হল একটি Android ফিচার যা Android সিস্টেম বার-এর পিছনে ড্র করে অ্যাপ্লিকেশনকে ডিসপ্লের সম্পূর্ণ প্রস্থ ও উচ্চতা জুড়ে দেখাতে দেয়।

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

সব জায়গায় বার

Android-এ অপারেটিং সিস্টেমের দেওয়া সিস্টেম বার থাকে।

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

স্ক্রিনের সবচেয়ে উপরে আপনি স্ট্যাটাস বার দেখতে পাবেন, এতে বিজ্ঞপ্তি আইকন ও সিস্টেম আইকন থাকে।

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

Android সিস্টেম বারের পাশাপাশি, Chrome-এ একটি অ্যাড্রেস বার থাকে যা আপনি স্ক্রল করার সাথে সাথে ডায়নামিক্যালি বড় ও ছোট হতে থাকে।

Chrome স্ক্রিনের এক প্রান্ত থেকে অন্য প্রান্ত পর্যন্ত দেখা যায়

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

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

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

এজ-টু-এজ সুবিধা ছাড়া Chrome-এর আচরণ

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

এখানে, Chrome-এর অ্যাড্রেস বার ছোট বা বড় হওয়ার সাথে সাথে লেআউট ভিউপোর্টের সাইজ পরিবর্তিত হয়।

এজ-টু-এজ ফিচারের সাথে Chrome-এর আচরণ

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

"চিন" সহ ডায়নামিক এজ-টু-এজ

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

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

Chrome 135 ও তার পরবর্তী ভার্সন থেকে এই চিনের আচরণ হল নতুন ডিফল্ট Chrome আচরণ।

সাধারণত অপ্ট-ইন সহ এজ-টু-এজ

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

কোনও পৃষ্ঠা viewport মেটা ট্যাগ ও এর viewport-fit কী ব্যবহার করে এজের-সাথে-এজ কাজ করে বলে ইঙ্গিত করতে পারে।

এজ-টু-এজ বিকল্পে অপ্ট-ইন করতে, viewport-fit-এর ভ্যালু cover হিসেবে সেট করুন।

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

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

জেসচার নেভিগেশন বারের কারণে বাধা পেতে পারে এমন কন্টেন্ট ম্যানেজ করা

এজ-টু-এজ মোডে, জেসচার নেভিগেশন বারের কারণে কোনও কন্টেন্ট আড়াল হয়ে যেতে পারে কিনা তা আপনাকে বিবেচনা করতে হবে।

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

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

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

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

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

নিরাপদ এরিয়া ইনসেট

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

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

নিরাপদ এরিয়া বটম ইনসেট ব্যবহার করা

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

.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-inset-bottom-এর সাথে safe-area-max-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 (don't set to "চালু করা আছে" but set to "চালু করা আছে ডিসপ্যাচ yOffset")
• DynamicSafeAreaInsets
• DynamicSafeAreaInsetsOnScroll
• EdgeToEdgeWebOptIn
• DrawKeyNativeEdgeToEdge
• EdgeToEdgeSafeAreaConstraint (don't set to "Enabled" but set to "Enabled Scrollable Variation")

নিচে উল্লেখ করা ফ্ল্যাগ চালু নেই কিনা তা নিশ্চিত করুন:

• DrawNativeEdgeToEdge
• EdgeToEdgeEverywhere

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

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

Chrome ও এর এজ-টু-এজ প্রয়োগ সম্পর্কে আপনার কোনও মতামত থাকলে, "UI > ব্রাউজার > মোবাইল > EdgeToEdge" কম্পোনেন্টে Chromium সংক্রান্ত সমস্যা জমা দিয়ে আমাদের সাথে যোগাযোগ করুন। মতামত জানানোর জন্য আপনাকে ধন্যবাদ।