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

Bramus

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

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

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

মনে রাখবেন: Chrome 135-এ করা পরিবর্তন ছোট স্ক্রিনের ডিভাইসকে টার্গেট করে। Android-এ Chrome বড় স্ক্রিনের ডিভাইসে রান করলে, সেটি বর্তমানে বাদ দেওয়া হয়েছে এবং ভবিষ্যতে Chrome রিলিজের সময় এই সমস্যার সমাধান করা হবে।

মনে রাখবেন: এই ফিচার Chrome ভেরিয়েশন ব্যবহার করে প্রকাশ করা হচ্ছে। তাই, আপনি Chrome-এর আগের ভার্সনে এটি দেখতে পেতে পারেন।

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

Android-এ অপারেটিং সিস্টেমের নিজস্ব সিস্টেম বার থাকে।

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

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

Android-এ স্ট্যাটাস বার হাইলাইট করা হয়েছে (সোর্স)।

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

জেসচার নেভিগেশন বার (সোর্স)।

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

Chrome-এ এজ-টু-এজ ভিউ

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

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

Chrome 135-এর আগে Android-এ Chrome-এর ভিউপোর্টের ন্যূনতম এবং সর্বাধিক সাইজ। এই সাইজগুলিকে ছোট এবং বড় ভিউপোর্ট বলা হয়। ভিউ-পোর্টের চারপাশে ড্যাশ দেওয়া নীল রঙের আউটলাইন আছে।

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

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

মনে রাখবেন: iOS 11.3 রিলিজ হওয়ার সাথে সাথে iOS-এ Chrome এজ-টু-এজ সাপোর্ট যোগ করেছে। এই গাইডে দেওয়া সাজেশন iOS-এ চলা Chrome-এর ক্ষেত্রেও প্রযোজ্য।

এজ-টু-এজ ছাড়া Chrome-এর আচরণ

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

পুরনো আচরণ: এজ-টু-এজ সাপোর্ট ছাড়া Android-এ Chrome এবং https://developer.chrome.com/ লোড করা হয়েছে।

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

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

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

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

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

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

নতুন আচরণ: এজ-টু-এজ সাপোর্ট সহ Android-এ Chrome এবং https://developer.chrome.com/ লোড করা হয়েছে। পৃষ্ঠা স্ক্রল করার সময় নিচের চিন কীভাবে সরে যায় তা লক্ষ্য করুন।

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

অপ্ট-ইন করার মাধ্যমে ডিফল্ট হিসেবে এজ-টু-এজ করা

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

এজ-টু-এজ অপ্ট-ইন সহ নতুন আচরণ: পৃষ্ঠা লোড হওয়ার সময় ভিউপোর্ট নিচের প্রান্ত পর্যন্ত প্রসারিত হয়। কোনও থুতনি নেই।

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

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

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

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

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

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

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

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

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

চিন উপস্থিত থাকলে, কন্টেন্টটি প্রাথমিকভাবে ব্যবহারকারীদের কাছে পৌঁছানো যাবে কিন্তু চিন চলে যাওয়ার সাথে সাথে Android-এর নেভিগেশন বার দ্বারা বাধাগ্রস্ত হবে।

`bottom: 0` সহ নিচে-পজিশন করা এলিমেন্ট সহ একটি ওয়েবসাইটের ইলাস্ট্রেশন। চিন দেখা গেলে, নিচে-পজিশন করা এলিমেন্ট Android-এর নেভিগেশন বারের উপরে থাকে। চিন সরে গেলে, এলিমেন্টটি Android-এর নেভিগেশন বারের পিছনে অবস্থান করে যা সেই মুহূর্তে এটিকে আংশিকভাবে অস্পষ্ট করে দেয়।

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

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

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

এই চারটি ভ্যালু একসাথে মিলে নিরাপদ আয়তক্ষেত্রাকার জায়গা তৈরি করে যেখানে কন্টেন্ট রাখলে তা নিরাপদ থাকে এবং Android জেসচার নেভিগেশন বারের মতো কোনও কিছু দিয়ে ঢাকা পড়ে যায় না।

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

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

ভিউ-পোর্টের নিচে পজিশন করা এলিমেন্টের জন্য, 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);
}

নিচের দিকে এলিমেন্ট সহ একটি ওয়েবসাইটের ছবি যা bottom প্রপার্টি সহ নিচের নিরাপদ এলাকার ইনসেট ব্যবহার করে। চিন দেখা গেলে, বারটি Android-এর জেসচার নেভিগেশন বারের উপরে থাকে। চিন চলে গেলে, এলিমেন্টটিও এর উপরে বসে।

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

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

padding-কে safe-area-inset ভ্যালুতে সেট করবেন না।

.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. */
}

গুরুত্বপূর্ণ: পারফর্ম্যান্স রিগ্রেশন প্রতিরোধ করতে, এই প্যাটার্ন শনাক্ত করলে, স্ক্রল করার সময় Chrome চিন স্লাইড করে সরিয়ে দেবে না।

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

পরিবর্তে, 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));
}

লাইভ ডেমো ব্যবহার করে দেখুন

মনে রাখবেন: safe-area-max-inset-bottom-এর জন্য 36px ফলব্যাক ভ্যালু বেছে নেওয়া হয়েছে যাতে যেসব ব্রাউজার safe-area-max-inset-bottom সাপোর্ট করে না সেগুলিতেও কাজ করে। iOS-এ Safari-তে সিঙ্গেল ট্যাব মোডে পোর্ট্রেট মোডে সর্বাধিক বটম অফসেট 36px থাকার কারণে এই মানটি বেছে নেওয়া হয়েছে।

গুরুত্বপূর্ণ: Chrome-এ কোড অপ্টিমাইজেশন আছে–একটি তথাকথিত ফাস্ট পাথ–যা calc(env(safe-area-inset-bottom, …) +/- …); প্যাটার্ন শনাক্ত করলে কাজ করে। এই ফাস্ট পাথ, বটম-অ্যাঙ্কর করা কন্টেন্টকে চিনের সাথে পারফর্ম্যান্ট উপায়ে সরানোর অনুমতি দেয়, যখন চিন সরে যায়।

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

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

মনে রাখবেন: Chrome 135 থেকে সর্বাধিক নিরাপদ এলাকার ইনসেট (safe-area-max-inset-bottom এবং অন্যান্য) উপলভ্য।

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

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

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

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

• DrawNativeEdgeToEdge
• EdgeToEdgeEverywhere

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

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

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