Android-এ Chrome-এ আসছে ভিউপোর্ট রিসাইজ আচরণ পরিবর্তনের জন্য প্রস্তুতি নিন

Bramus

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

এখানে কি ঘটছে, কেন Chrome এই পরিবর্তন করছে এবং আপনি প্রস্তুত করার জন্য কী করতে পারেন তার কিছু পটভূমি রয়েছে৷

লেআউট ভিউপোর্ট এবং ভিজ্যুয়াল ভিউপোর্ট

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

position: fixed ব্যবহার করে উপাদানের অবস্থান নির্ধারণ করার সময়, এই লেআউট ভিউপোর্টের বিপরীতে রাখা হবে। আপনি একটি পৃষ্ঠার নিচে স্ক্রোল করার সাথে সাথে লেআউট ভিউপোর্ট যেমন জায়গায় থাকে, তেমনি position: fixed ।

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

পিঞ্চ-জুম ইন করার সময়, আপনি লেআউট ভিউপোর্টের সাথে সম্পর্কিত ভিজ্যুয়াল ভিউপোর্টের আকার সঙ্কুচিত করেন।

ভিউপোর্ট রিসাইজ আচরণ

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

এটি করার সময়, ব্রাউজারগুলি বিভিন্ন ভিউপোর্টের সাথে সম্পর্কিত নিম্নলিখিত উপায়গুলির মধ্যে একটিতে প্রতিক্রিয়া জানায়:

• শুধুমাত্র ভিজ্যুয়াল ভিউপোর্টের আকার পরিবর্তন করুন এবং লেআউট ভিউপোর্ট অফসেট করুন।
• ভিজ্যুয়াল ভিউপোর্ট এবং লেআউট ভিউপোর্ট উভয়ের আকার পরিবর্তন করুন।
• উভয়ের উপরে ভার্চুয়াল কীবোর্ডকে ওভারলে করে লেআউট ভিউপোর্ট বা ভিজ্যুয়াল ভিউপোর্টের কোনোটির আকার পরিবর্তন করবেন না।

এই তিনটি আচরণ নিম্নলিখিত হিসাবে কল্পনা করা হয়:

একজন দর্শক কোন ব্রাউজার এবং OS সংমিশ্রণ ব্যবহার করেন তার উপর নির্ভর করে, আপনার নিয়ন্ত্রণের বাইরে একটি আচরণ ব্যবহার করা হয়।

বিভিন্ন আকার পরিবর্তন আচরণ ম্যাপিং

ভিউপোর্ট ইনভেস্টিগেশন প্রচেষ্টা - ইন্টারপ 2022- এর অংশে - প্রতিটি প্রধান ব্রাউজার এবং ওএস সংমিশ্রণের জন্য বিভিন্ন ভিউপোর্ট-সম্পর্কিত দিকগুলি তদন্ত করা হয়েছিল।

পরীক্ষিত দিকগুলির মধ্যে একটি হল পুনরায় আকারের আচরণ যখন OSK দেখানো হয়। এটি নিম্নলিখিত শ্রেণীবিভাগের দিকে পরিচালিত করেছে:

গ্রুপ এক

যে ব্রাউজারগুলি ভিজ্যুয়াল ভিউপোর্টের আকার পরিবর্তন করে, লেআউট ভিউপোর্টকে অস্পৃশ্য রাখে।

• iOS-এ সাফারি
• iPadOS এ সাফারি
• Chrome OS-এ Chrome
• iOS-এ ক্রোম
• iPadOS এ ক্রোম
• iOS এ এজ
• iPadOS এ এজ

গ্রুপ দুই

যে ব্রাউজারগুলি ভিজ্যুয়াল ভিউপোর্ট এবং লেআউট ভিউপোর্ট উভয়ের আকার পরিবর্তন করে।

• অ্যান্ড্রয়েডে ক্রোম
• অ্যান্ড্রয়েডে ফায়ারফক্স
• অ্যান্ড্রয়েডে এজ
• iOS-এ ফায়ারফক্স

গ্রুপ তিন

যেসব ব্রাউজার কোনো ভিউপোর্টের আকার পরিবর্তন করে না:

• ডিফল্টরূপে কিছুই নয় - অ্যান্ড্রয়েডের ক্রোমে আপনি ভার্চুয়াল কীবোর্ড API এর মাধ্যমে এই আচরণটি বেছে নিতে পারেন

প্রতিটি আচরণের পার্শ্ব প্রতিক্রিয়া

ওএসকে দেখানো হলে বিভিন্ন ভিউপোর্টের আকার পরিবর্তন করার এই পার্থক্যটি ওয়েবসাইটগুলির একটি অ-আন্তঃপ্রক্রিয়াযোগ্য বিন্যাস এবং আকার পরিবর্তনের দিকে নিয়ে যায়।

গ্রুপ 1 থেকে ব্রাউজারে, OSK দেখানো হয়েছে:

• ভিউপোর্ট-রিলেটিভ ইউনিটের জন্য গণনাকৃত মান একই থাকে।
• সম্পূর্ণ ভিজ্যুয়াল স্পেস নেওয়ার জন্য ডিজাইন করা উপাদানগুলি তাদের আকার রাখে।
• যে উপাদানগুলি position: fixed জায়গায় থাকে এবং OSK দ্বারা অস্পষ্ট হতে পারে।

গ্রুপ 2 থেকে ব্রাউজারগুলিতে, OSK দেখানো হয়েছে:

• ভিউপোর্ট-সম্পর্কিত ইউনিটগুলির জন্য গণনাকৃত মান সঙ্কুচিত হয়।
• যে উপাদানগুলি সম্পূর্ণ ভিজ্যুয়াল স্পেস সঙ্কুচিত করার জন্য ডিজাইন করা হয়েছিল।
• যে উপাদানগুলি position: fixed লেআউটের অন্য কোথাও শেষ হতে পারে।

আপনি ব্যবহারকারী-এজেন্ট স্নিফিং অবলম্বন না করলে বা বিস্তৃত স্ক্রিপ্টিংয়ের উপর নির্ভর না করলে, কোন আচরণ ব্যবহার করা হয় তা আপনি জানতে পারবেন না। আপনি আচরণটিও পরিবর্তন করতে পারবেন না, কারণ এটি ব্যবহারকারী যে ব্রাউজার এবং OS সংমিশ্রণ থেকে পরিদর্শন করছেন তা দ্বারা নির্ধারিত হয়৷

Chrome 108-এ ডিফল্ট আচরণ পরিবর্তন করা হচ্ছে

ক্রোম 108 অনুযায়ী, অ্যান্ড্রয়েডে ক্রোম তার ভিউপোর্ট রিসাইজ আচরণকে সামঞ্জস্য করবে যাতে অন-স্ক্রীন কীবোর্ড দেখানো হলে লেআউট ভিউপোর্টের আকার পরিবর্তন না করা যায়।

এটি Android-এ Chrome-এর আচরণকে iOS, iPadOS, Windows, এবং CrOS-এ Chrome-এর সাথে, iOS এবং iPadOS-এ Safari এবং iOS, iPadOS এবং Windows-এ এজ-এর সাথে সারিবদ্ধ করবে।

এই পরিবর্তনের জন্য ধন্যবাদ, লেখকরা জানতে পারবেন কোন আচরণটি ব্যবহার করা হবে, কোন OS Chrome চালু থাকুক না কেন। উপরন্তু এটি স্থিতিশীল ভিউপোর্ট-সম্পর্কিত ইউনিটগুলির জন্য অনুমতি দেয়: OSK দেখানো বা লুকানো এই ইউনিটগুলিকে প্রভাবিত করে না।

একটি ভিন্ন আচরণ নির্বাচন করা

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

interactive-widget কী-এর মাধ্যমে, আপনি ক্রোমকে বলতে পারেন কোন রিসাইজ আচরণ আপনি চান৷

interactive-widget জন্য গৃহীত মানগুলি হল:

• resizes-visual : শুধুমাত্র ভিজ্যুয়াল ভিউপোর্টের আকার পরিবর্তন করুন কিন্তু লেআউট ভিউপোর্ট নয়।
• resizes-content : ভিজ্যুয়াল ভিউপোর্ট এবং লেআউট ভিউপোর্ট উভয়ের আকার পরিবর্তন করুন।
• overlays-content : কোনো ভিউপোর্টের আকার পরিবর্তন করবেন না।

অ্যান্ড্রয়েড আচরণে "পুরানো" ক্রোমে ফিরে অপ্ট ইন করতে, ভিউপোর্ট মেটা ট্যাগটি এতে সেট করুন:

<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">

আপনি ভিউপোর্ট মেটা ট্যাগে interactive-widget অন্তর্ভুক্ত না করলে, Chrome ডিফল্ট আচরণ ব্যবহার করবে, যা resizes-visual ।

ভিজ্যুয়ালাইজড, বিভিন্ন ভিউপোর্টে সেটিংসের এই প্রভাব রয়েছে:

আপনি এই ডেমো ওয়েবসাইটে আপনার ব্রাউজারে প্রতিটি মানের প্রভাব চেষ্টা করতে পারেন।

পরীক্ষা এবং প্রতিক্রিয়া

আমরা বিদ্যমান সাইটগুলিতে কিছু ছোটখাটো পার্থক্য আশা করি, কিন্তু আশা করি যে এগুলি ব্লক করা যাবে না কারণ Android-এ Chrome 108 এখন iOS-এ Safari-এর মতোই আচরণ করবে৷ অতএব, যে ওয়েবসাইটগুলি iOS-এ Safari-এ সূক্ষ্ম কাজ করে সেগুলি Android-এ Chrome 108-এও ভাল কাজ করবে৷

যাইহোক, আমরা ওয়েবসাইট লেখকদের সক্রিয়ভাবে Chrome 108-এ তাদের ওয়েবসাইটগুলি পরীক্ষা করার জন্য উত্সাহিত করি, যা 27 অক্টোবর 2022 থেকে বিটাতে রয়েছে। বিশেষভাবে এমন উপাদানগুলির জন্য দেখুন যা position: fixed এবং/অথবা ভিউপোর্ট-রিলেটিভ ইউনিটের উপর নির্ভর করে।

প্রতিক্রিয়া crbug.com এ রিপোর্ট করা যেতে পারে। রিপোর্টের শিরোনামে "অন-স্ক্রিন কীবোর্ড" অন্তর্ভুক্ত করতে ভুলবেন না।

অতিরিক্ত সম্পদ

• ক্রোম স্ট্যাটাস এন্ট্রি
• ব্যাখ্যাকারী
• ডেমো