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

Bramus

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

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

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

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

দ্রষ্টব্য: এই বৈশিষ্ট্যটি একটি Chrome বৈচিত্র ব্যবহার করে রোল আউট করা হচ্ছে৷ তাই আপনি Chrome এর আগের সংস্করণে এটি দেখতে পারেন।

সর্বত্র বার

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

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

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

অ্যান্ড্রয়েডের স্ট্যাটাস বার হাইলাইট করা হয়েছে ( উৎস ) ।

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

অঙ্গভঙ্গি নেভিগেশন বার ( উৎস )।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

এই চিবুক আচরণটি 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 এর নেভিগেশন বারের পিছনে অবস্থান করে যা সেই সময়ে এটিকে আংশিকভাবে অস্পষ্ট করে।

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

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

Browser Support

• 69
• 79
• 65
• 11

Source

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

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

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

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

ভিউপোর্টের নীচে অবস্থান করা উপাদানগুলির জন্য, অঙ্গভঙ্গি নেভিগেশন বারের নীচে অবস্থান করা থেকে বিরত রাখতে 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);
}

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

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

নীচের-অ্যাঙ্কর করা বিষয়বস্তুর নীচে আঁকা হওয়া থেকে আটকাতে, একটি সাধারণভাবে ব্যবহৃত পদ্ধতি হল 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);
}

গুরুত্বপূর্ণ: পারফরম্যান্স রিগ্রেশন রোধ করতে, 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-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));
}

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

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

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

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

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

দ্রষ্টব্য: সর্বাধিক নিরাপদ এলাকা ইনসেট ( safe-area-max-inset-bottom এবং বন্ধু) Chrome 135 থেকে পাওয়া যায়।

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

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

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

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

• DrawNativeEdgeToEdge
• EdgeToEdgeEverywhere

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

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

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