ডিভাইস মোড সহ মোবাইল ডিভাইস অনুকরণ

Kayce Basques

Sofia Emelianova

মোবাইল ডিভাইসে আপনার পেজটি দেখতে ও কাজ করতে কেমন হবে, তার একটি আনুমানিক ধারণা পেতে ডিভাইস মোড ব্যবহার করুন।

সংক্ষিপ্ত বিবরণ

ডিভাইস মোড হলো ক্রোম ডেভটুলস-এর এমন কিছু ফিচারের সমষ্টি যা আপনাকে মোবাইল ডিভাইস সিমুলেট করতে সাহায্য করে। এই ফিচারগুলো হলো:

• একটি মোবাইল ভিউপোর্ট অনুকরণ করা
• সিপিইউ-এর গতি কমানো
• নেটওয়ার্কের গতি কমানো
  গুরুত্বপূর্ণ বিষয়: বিকল্পভাবে, আপনি নেটওয়ার্ক প্যানেলে সংযোগের গতি নিয়ন্ত্রণ করতে পারেন।
• এছাড়াও, সেন্সর প্যানেলে :
  • ভূ-অবস্থান অনুকরণ
  • অভিমুখ নির্ধারণ করা

সীমাবদ্ধতা

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

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

ডিভাইস টুলবার খুলুন

ডিভাইস টুলবার খুলতে, এই ধাপগুলো অনুসরণ করুন:

1. ডেভটুলস খুলুন ।
2. উপরের অ্যাকশন বারে অবস্থিত ডিভাইস টুলবারটি টগল করতে ডিভাইসগুলিতে ক্লিক করুন।

একটি মোবাইল ভিউপোর্ট অনুকরণ করুন

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

রেসপন্সিভ ভিউপোর্ট মোড

আপনার প্রয়োজন অনুযায়ী ভিউপোর্টের আকার পরিবর্তন করতে হ্যান্ডেলগুলো টেনে নিন। অথবা, প্রস্থ এবং উচ্চতার বক্সে নির্দিষ্ট মান লিখুন। এই উদাহরণে, প্রস্থ 480 এবং উচ্চতা 415 নির্ধারণ করা হয়েছে।

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

মোবাইল এস	মোবাইল এম	মোবাইল এল	ট্যাবলেট	ল্যাপটপ	ল্যাপটপ এল	৪কে
৩২০ পিক্সেল	৩৭৫ পিক্সেল	৪২৫ পিক্সেল	৭৬৮ পিক্সেল	১০২৪ পিক্সেল	১৪৪০ পিক্সেল	২৫৬০ পিক্সেল

মিডিয়া কোয়েরি দেখান

আপনার ভিউপোর্টের উপরে মিডিয়া কোয়েরি ব্রেকপয়েন্ট দেখাতে, ক্লিক করুন আরও বিকল্প > মিডিয়া কোয়েরি দেখান ।

DevTools এখন ভিউপোর্টের উপরে দুটি অতিরিক্ত বার প্রদর্শন করে:

• max-width ব্রেকপয়েন্ট সহ নীল বারটি।
• min-width ব্রেকপয়েন্টসহ কমলা বারটি।

ভিউপোর্টের প্রস্থ পরিবর্তন করতে ব্রেকপয়েন্টগুলোর মাঝখানে ক্লিক করুন, যাতে ব্রেকপয়েন্টটি ট্রিগার হয়।

সংশ্লিষ্ট @media ডিক্লারেশনটি খুঁজে পেতে, ব্রেকপয়েন্টগুলোর মাঝে রাইট-ক্লিক করুন এবং 'Reveal in source code' নির্বাচন করুন। DevTools এডিটরের সংশ্লিষ্ট লাইনে সোর্সেস প্যানেলটি খুলে দেবে।

ডিভাইসের পিক্সেল অনুপাত সেট করুন

ডিভাইস পিক্সেল রেশিও (DPR) হলো হার্ডওয়্যার স্ক্রিনের ফিজিক্যাল পিক্সেল এবং লজিক্যাল (CSS) পিক্সেলের অনুপাত। অন্য কথায়, একটি CSS পিক্সেল আঁকতে কতগুলো স্ক্রিন পিক্সেল ব্যবহার করতে হবে, তা DPR ক্রোমকে বলে দেয়। হাইডিপিআই (হাই ডটস পার ইঞ্চি) ডিসপ্লেতে আঁকার সময় ক্রোম DPR-এর মান ব্যবহার করে।

একটি ডিপিআর মান নির্ধারণ করতে:

1. আরও বিকল্পগুলিতে ক্লিক করুন ডিভাইসের পিক্সেল অনুপাত যোগ করুন ।

   

2. ভিউপোর্টের উপরের অ্যাকশন বারে, নতুন ডিপিআর ড্রপ-ডাউন মেনু থেকে একটি ডিপিআর মান নির্বাচন করুন।

   

ডিভাইসের ধরণ সেট করুন

মোবাইল ডিভাইস বা ডেস্কটপ ডিভাইস অনুকরণ করতে ডিভাইস টাইপ তালিকাটি ব্যবহার করুন।

যদি আপনি উপরের অ্যাকশন বারে তালিকাটি দেখতে না পান, তাহলে আরও বিকল্প নির্বাচন করুন। ডিভাইসের ধরণ যোগ করুন ।

পরবর্তী সারণীতে অপশনগুলোর মধ্যে পার্থক্য বর্ণনা করা হয়েছে। রেন্ডারিং মেথড বলতে বোঝায় ক্রোম পেজটিকে মোবাইল নাকি ডেস্কটপ ভিউপোর্ট হিসেবে রেন্ডার করবে। কার্সার আইকন বলতে বোঝায় পেজটির উপর কার্সার রাখলে আপনি কী ধরনের কার্সার দেখতে পাবেন। ইভেন্টস ফায়ার্ড বলতে বোঝায়, আপনি পেজটির সাথে ইন্টারঅ্যাক্ট করার সময় touch নাকি click ইভেন্ট ফায়ার করবে।

বিকল্প	রেন্ডারিং পদ্ধতি	কার্সার আইকন	ঘটনাগুলো শুরু হয়েছিল
মোবাইল	মোবাইল	বৃত্ত	স্পর্শ
মোবাইল (স্পর্শবিহীন)	মোবাইল	স্বাভাবিক	ক্লিক করুন
ডেস্কটপ	ডেস্কটপ	স্বাভাবিক	ক্লিক করুন
ডেস্কটপ (টাচ)	ডেস্কটপ	বৃত্ত	স্পর্শ

ডিভাইস-নির্দিষ্ট মোড

কোনো নির্দিষ্ট মোবাইল ডিভাইসের মাত্রা অনুকরণ করতে, ডাইমেনশন তালিকা থেকে ডিভাইসটি নির্বাচন করুন।

আরও তথ্যের জন্য, ‘একটি কাস্টম মোবাইল ডিভাইস যোগ করুন’ দেখুন।

ভিউপোর্টটি ল্যান্ডস্কেপ ওরিয়েন্টেশনে ঘোরান।

ভিউপোর্টকে ল্যান্ডস্কেপ ওরিয়েন্টেশনে ঘোরাতে screen_rotation- এ ক্লিক করুন।

লক্ষ্য করুন যে ঘূর্ণন আপনার ডিভাইস টুলবার সংকীর্ণ হলে বাটনটি অদৃশ্য হয়ে যায়।

আরও দেখুন অভিমুখ নির্ধারণ করুন ।

ডুয়াল-স্ক্রিন মোড টগল করুন

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

ডুয়াল এবং সিঙ্গেল স্ক্রিনের মধ্যে টগল করতে, টুলবারে থাকা `devices_fold Toggle dual-screen mode` বোতামে ক্লিক করুন।

ডিভাইসের ভঙ্গি সেট করুন

কিছু ডিভাইসে, যেমন আসুস জেনবুক ফোল্ড-এ, ভাঁজযোগ্য স্ক্রিন থাকে। এই ধরনের স্ক্রিনের দুটি অবস্থা থাকে: অবিচ্ছিন্ন বা ভাঁজ করা। অবিচ্ছিন্ন অবস্থা বলতে একটি 'সমতল' অবস্থানকে বোঝায় এবং ভাঁজ করা অবস্থায় ডিসপ্লের বিভিন্ন অংশের মধ্যে একটি কোণ তৈরি হয়।

ডিভাইসের ভঙ্গি সেট করতে, টুলবারের সংশ্লিষ্ট ড্রপ-ডাউন মেনু থেকে Continuous বা Folded নির্বাচন করুন।

ডিভাইস ফ্রেম দেখান

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

দ্রষ্টব্য: যদি আপনি কোনো নির্দিষ্ট ডিভাইসের জন্য ডিভাইস ফ্রেম দেখতে না পান, তার মানে সম্ভবত DevTools-এর কাছে সেই নির্দিষ্ট অপশনটির জন্য কোনো আর্ট নেই।

এই উদাহরণে, DevTools নেস্ট হাবের ফ্রেমটি দেখাচ্ছে।

একটি কাস্টম মোবাইল ডিভাইস যোগ করুন

একটি কাস্টম ডিভাইস যোগ করতে:

1. ডিভাইস তালিকায় ক্লিক করুন এবং তারপর সম্পাদনা নির্বাচন করুন।

   

2. সেটিংস > ডিভাইস ট্যাবে, সমর্থিত ডিভাইসের তালিকা থেকে একটি ডিভাইস বেছে নিন অথবা আপনার নিজের ডিভাইস যোগ করতে 'কাস্টম ডিভাইস যোগ করুন'- এ ক্লিক করুন।

3. আপনি যদি নিজের ডিভাইস যোগ করতে চান, তাহলে সেটির জন্য একটি নাম, প্রস্থ এবং উচ্চতা লিখুন, তারপর ' যোগ করুন ' বোতামে ক্লিক করুন।

   

   ডিভাইস পিক্সেল রেশিও , ইউজার এজেন্ট স্ট্রিং এবং ডিভাইস টাইপ ফিল্ডগুলো ঐচ্ছিক। ডিভাইস টাইপ ফিল্ডটি হলো একটি তালিকা যা ডিফল্টরূপে 'মোবাইল' হিসেবে সেট করা থাকে।

4. ভিউপোর্টে ফিরে এসে, ডাইমেনশন তালিকা থেকে নতুন যোগ করা ডিভাইসটি নির্বাচন করুন।

শাসকদের দেখান

আরও বিকল্পগুলিতে ক্লিক করুন রুলারগুলো দেখতে 'Show Rulers'-এ ক্লিক করুন। রুলারগুলোর আকারের একক হলো পিক্সেল।

ডেভটুলস ভিউপোর্টের উপরে এবং বাম দিকে রুলার দেখায়।

ভিউপোর্টের প্রস্থ ও উচ্চতা নির্ধারণ করতে রুলারগুলোর নির্দিষ্ট চিহ্নে ক্লিক করুন।

ভিউপোর্ট জুম করুন

জুম ইন বা আউট করতে জুম তালিকাটি ব্যবহার করুন।

একটি স্ক্রিনশট নিন

ভিউপোর্টে যা দেখছেন তার একটি স্ক্রিনশট নিতে, ক্লিক করুন আরও বিকল্প > স্ক্রিনশট নিন ।

ভিউপোর্টে দৃশ্যমান নয় এমন বিষয়বস্তুসহ পুরো পেজটির একটি স্ক্রিনশট নিতে, একই মেনু থেকে ‘Capture a full size screenshot’ নির্বাচন করুন।

ডিভাইস-নির্দিষ্ট মোডে স্ক্রিনশট নেওয়ার সময় ডিভাইস ফ্রেম অন্তর্ভুক্ত করতে, প্রথমে 'Show device frame'-এ ক্লিক করুন এবং তারপরে পূর্বের নির্দেশনা অনুযায়ী 'Capture screenshot'-এ ক্লিক করুন।

DevTools দিয়ে স্ক্রিনশট নেওয়ার অন্যান্য উপায় জানতে, “DevTools দিয়ে স্ক্রিনশট ক্যাপচার করার ৪টি উপায়” দেখুন।

নেটওয়ার্ক এবং সিপিইউ-এর গতি কমান।

নেটওয়ার্ক এবং সিপিইউ উভয়ের গতি কমাতে, থ্রটল তালিকা থেকে মিড-টিয়ার মোবাইল অথবা লো-এন্ড মোবাইল নির্বাচন করুন।

মাঝারি মানের মোবাইল দ্রুতগতির ৩জি নেটওয়ার্কের অনুকরণ করে এবং আপনার সিপিইউ-এর গতি কমিয়ে দেয়, ফলে এটি স্বাভাবিকের চেয়ে ৪ গুণ ধীর হয়ে যায়। নিম্নমানের মোবাইল ধীরগতির ৩জি নেটওয়ার্কের অনুকরণ করে এবং আপনার সিপিইউ-এর গতি স্বাভাবিকের চেয়ে ৬ গুণ কমিয়ে দেয়। মনে রাখবেন যে, এই গতি কমানোটা আপনার ল্যাপটপ বা ডেস্কটপের স্বাভাবিক ক্ষমতার সাপেক্ষে হয়ে থাকে।

মনে রাখবেন, আপনার ডিভাইস টুলবারটি সংকীর্ণ হলে থ্রটল তালিকাটি লুকানো থাকবে।

শুধুমাত্র সিপিইউ থ্রটল করুন

শুধুমাত্র সিপিইউ-এর গতি কমাতে এবং নেটওয়ার্কের গতি না কমাতে, পারফরম্যান্স প্যানেলে গিয়ে ক্যাপচার সেটিংস-এ ক্লিক করুন। এবং তারপরে সিপিইউ তালিকা থেকে 4x স্লোডাউন , 6x স্লোডাউন বা 20x স্লোডাউন নির্বাচন করুন।

শুধুমাত্র নেটওয়ার্কের গতি কমান

সিপিইউ-এর গতি না কমিয়ে শুধু নেটওয়ার্কের গতি কমাতে, নেটওয়ার্ক প্যানেলে গিয়ে থ্রটল তালিকা থেকে ফাস্ট 3G বা স্লো 3G নির্বাচন করুন।

অথবা কমান্ড মেনু খুলতে Command+Shift+P (Mac) বা Control+Shift+P (Windows, Linux, ChromeOS) চাপুন, 3G টাইপ করুন এবং Enable fast 3G throttling অথবা Enable slow 3G throttling নির্বাচন করুন।

আপনি পারফরম্যান্স প্যানেল থেকেও নেটওয়ার্ক থ্রটলিং সেট করতে পারেন। ক্যাপচার সেটিংস-এ ক্লিক করুন। এবং তারপর নেটওয়ার্ক তালিকা থেকে ফাস্ট ৩জি অথবা স্লো ৩জি নির্বাচন করুন।

সেন্সর অনুকরণ করুন

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

পরবর্তী বিভাগগুলিতে জিওলোকেশন ওভাররাইড করার এবং ডিভাইসের ওরিয়েন্টেশন সেট করার পদ্ধতি সম্পর্কে সংক্ষেপে আলোচনা করা হয়েছে। বৈশিষ্ট্যগুলির সম্পূর্ণ তালিকার জন্য, ‘ডিভাইস সেন্সর অনুকরণ করুন’ দেখুন।

ভূ-অবস্থান অগ্রাহ্য করুন

জিওলোকেশন ওভাররাইডিং UI খুলতে, কাস্টমাইজ এবং কন্ট্রোল ডেভটুলস-এ ক্লিক করুন। এবং তারপর আরও টুলস > সেন্সর নির্বাচন করুন।

অথবা কমান্ড মেনু খুলতে Command+Shift+P (Mac) বা Control+Shift+P (Windows, Linux, ChromeOS) চাপুন, Sensors টাইপ করুন এবং তারপরে Show Sensors নির্বাচন করুন।

লোকেশন তালিকা থেকে প্রিসেটগুলোর মধ্যে একটি বেছে নিন, অথবা আপনার নিজস্ব স্থানাঙ্ক প্রবেশ করাতে ‘অন্যান্য...’ নির্বাচন করুন, কিংবা জিওলোকেশন ত্রুটিপূর্ণ অবস্থায় থাকলে আপনার পৃষ্ঠাটি কীভাবে আচরণ করে তা পরীক্ষা করতে ‘লোকেশন অনুপলব্ধ’ নির্বাচন করুন।

অভিমুখীকরণ সেট করুন

ওরিয়েন্টেশন UI খুলতে, কাস্টমাইজ এবং কন্ট্রোল ডেভটুলস-এ ক্লিক করুন। এবং তারপর আরও টুলস > সেন্সর নির্বাচন করুন।

অথবা কমান্ড মেনু খুলতে Command+Shift+P (Mac) বা Control+Shift+P (Windows, Linux, ChromeOS) চাপুন, Sensors টাইপ করুন এবং তারপরে Show Sensors নির্বাচন করুন।

ওরিয়েন্টেশন তালিকা থেকে প্রিসেটগুলির মধ্যে একটি বেছে নিন অথবা আপনার নিজস্ব আলফা, বিটা এবং গামা মান সেট করতে কাস্টম ওরিয়েন্টেশন নির্বাচন করুন।