আপনি যদি একজন ওয়েব ডেভেলপার হন বা একটি অনলাইন ব্যবসার মালিক হন, তাহলে আপনি একটি মোবাইল সাইট ডেস্কটপে কেমন দেখায় তা জানতে আগ্রহী হতে পারেন। আপনার মোবাইল সাইটের উপস্থিতি এবং কার্যকারিতা গুরুত্বপূর্ণ হতে পারে কারণ অর্ধেকেরও বেশি ইন্টারনেট ট্রাফিক ফোন থেকে আসে। গ্রাহকদের একটি সাইটে বেশিক্ষণ থাকার বা দৃশ্যত আকর্ষণীয় হলে কিছু কেনার সম্ভাবনা বেশি। একটি ডেস্কটপ ভিউ আপনাকে সম্পাদনা করতে এবং সম্ভাব্য সমস্যাগুলি দ্রুত সমাধান করতে সহায়তা করতে পারে।
ভাগ্যক্রমে, এটি একটি অপেক্ষাকৃত সহজবোধ্য প্রক্রিয়া। এই নিবন্ধে, আমরা আপনাকে দেখাব কিভাবে বিভিন্ন ডিভাইস এবং ব্রাউজারে একটি ওয়েবসাইটের মোবাইল সংস্করণ দেখতে হয়।
কিভাবে একটি Mac এ Chrome এ একটি ওয়েবসাইটের মোবাইল সংস্করণ দেখতে হয়
ক্রোমে, আপনি সামনের প্রান্তটি পরীক্ষা করতে পারেন এবং DevTools নামক একটি বিল্ট-ইন ডেভেলপার টুল ব্যবহার করে ওয়েবসাইটের সমস্ত উপাদান সঠিকভাবে কাজ করছে কিনা তা দেখতে পারেন। যেহেতু এটি পূর্বনির্ধারিত ডিভাইস পছন্দ প্রদান করে, তাই ডেভেলপারের জন্য ডেভেলপারের জন্য ডেভেলপারের এক্সটেনশন ছাড়াই দ্রুত দৃশ্যটি ডেস্কটপ থেকে মোবাইলে স্থানান্তর করার সবচেয়ে বড় উপায় হল DevTools।
এছাড়াও আপনি আপনার প্রয়োজন অনুসারে পর্দার আকার পরিবর্তন করতে পারেন এবং আপনার ওয়েবসাইট বিভিন্ন স্ক্রীনের আকারে কেমন দেখাবে তা দেখতে স্ক্রীনের প্রস্থ এবং উচ্চতা সামঞ্জস্য করতে পারেন। একটি Mac এ এটি করতে, এই পদক্ষেপগুলি অনুসরণ করুন:
- গুগল ক্রোম ব্রাউজার চালু করুন এবং আপনি যে সাইটটি দেখতে চান সেখানে যান।
- DevTools অ্যাক্সেস করতে আপনার কীবোর্ডে F12 টিপুন।
- মোড চালু হলে, টগল ডিভাইস এমুলেশন আইকনে ক্লিক করুন।
- আপনি তাদের অনুকরণ করতে iOS এবং Android ডিভাইসগুলির একটি তালিকা থেকে চয়ন করতে পারেন৷
- এটি আপনার বেছে নেওয়া মোবাইল ফর্মে ওয়েবসাইটটি দেখাবে।
আপনি শেষ হয়ে গেলে, ওয়েবসাইটের মোবাইল সংস্করণ বন্ধ করতে বিকাশকারী টুল উইন্ডোটি বন্ধ করুন।
উইন্ডোজ পিসিতে ক্রোমে একটি ওয়েবসাইটের মোবাইল সংস্করণ কীভাবে দেখতে হয়
আপনি যদি ক্রোমে উইন্ডোজ পিসিতে কোনও ওয়েবসাইটের একটি মোবাইল সংস্করণ দেখতে চান তবে এটি বেশ অনুরূপ প্রক্রিয়া:
- ক্রোম ব্রাউজার খুলুন।
- Chrome-এ, আপনি যে ওয়েবসাইটটি মোবাইল সংস্করণে দেখতে চান সেখানে যান।
- ওয়েবপেজে ডান ক্লিক করুন এবং মেনু থেকে পরিদর্শন নির্বাচন করুন।
- Developer Tools-এ যেতে, More Tools ট্যাবে ক্লিক করুন এবং Developer Tools নির্বাচন করুন বা DevTools খুলতে F12 চাপুন।
- বিকাশকারী সরঞ্জাম উইন্ডো খুলবে।
- মোবাইল সাইট ভিউ মোডে স্যুইচ করতে ডিভাইস টগল আইকনে ক্লিক করুন।
- আপনি যে মোবাইল ডিভাইসটি অনুকরণ করতে চান তা চয়ন করুন (ঐচ্ছিক)।
- আপনি এখন আপনার প্রয়োজন অনুসারে পর্দার মাত্রা পরিবর্তন করতে পারেন।
কিভাবে একটি Chromebook এ Chrome-এ একটি ওয়েবসাইটের মোবাইল সংস্করণ দেখতে হয়
একটি Chromebook ব্যবহার করে Chrome-এ একটি ওয়েবসাইটের মোবাইল সংস্করণ অ্যাক্সেস করা প্রথম দুটি পদ্ধতির মতোই।
- গুগল ক্রোম ওয়েব ব্রাউজার খুলুন।
- আপনি আপনার মোবাইল ডিভাইসে যে ওয়েবপৃষ্ঠাটি অ্যাক্সেস করতে চান সেটি খুলুন।
- মেনু অ্যাক্সেস করতে, উল্লম্ব তিনটি বিন্দু আইকনে ক্লিক করুন।
- তালিকার আরও টুল আইটেমের উপর আপনার মাউস টেনে আনুন।
- বিকাশকারী সরঞ্জাম নির্বাচন করুন।
- ব্রাউজারে ডেভেলপার টুলস উইন্ডো খুলবে।
- ডিভাইস টগল আইকনে ক্লিক করে মোবাইল সাইট ভিউ মোড টগল করুন।
এটি মোবাইল সাইটের জন্য ইউজার ইন্টারফেস আনবে। আপনি ড্রপডাউন বক্স থেকে মেক এবং মডেল নির্বাচন করে পছন্দের ডিভাইস অভিজ্ঞতা বাছাই করতে পারেন। আপনি যখনই ডেভেলপার টুলস কনসোল বন্ধ করবেন তখনই ওয়েবপৃষ্ঠাটি ডেস্কটপ সাইট হিসেবে রিফ্রেশ হবে।
কিভাবে একটি Mac এ ফায়ারফক্সে একটি ওয়েবসাইটের মোবাইল সংস্করণ দেখতে হয়
আপনি ম্যাক ডেস্কটপে একটি মোবাইল সাইট দেখতে Firefox এর মতো অন্যান্য ওয়েব ব্রাউজার ব্যবহার করতে পারেন। ব্রাউজার উইন্ডোর আকার পরিবর্তন করা হল একটি পদ্ধতি যা বেশিরভাগ ওয়েব ডেভেলপার প্রতিক্রিয়াশীল ডিজাইনের ওয়েবসাইট মূল্যায়ন করতে ব্যবহার করে। যাইহোক, বেশিরভাগ সময়, এই বিকল্পটি গ্রহণযোগ্য বলে মনে হবে না।
সেখানেই ফায়ারফক্স ব্রাউজারের ওয়েব ডেভেলপমেন্ট ক্ষমতা কাজে আসে। আপনি যদি ফায়ারফক্সে ওয়েবসাইটগুলির মোবাইল সংস্করণগুলি অ্যাক্সেস করতে জানেন তবে আপনি একাধিক রেজোলিউশনে আপনার ওয়েব পৃষ্ঠাগুলি ব্রাউজ করতে পারেন। এই পদক্ষেপগুলি অনুসরণ করুন:
- আপনি যে ওয়েবসাইটটি দেখতে চান তার মোবাইল সংস্করণটি খুলুন।
- ওয়েবপেজে ডান-ক্লিক করুন এবং মেনু থেকে পরিদর্শন বিকল্পটি নির্বাচন করুন।
- প্রতিক্রিয়াশীল ডিজাইন মোড নির্বাচন করুন.
- ওয়েবসাইটের পর্দার আকার নির্বাচন করুন।
উইন্ডোজ পিসিতে ফায়ারফক্সে একটি ওয়েবসাইটের মোবাইল সংস্করণ কীভাবে দেখতে হয়
উইন্ডোজ পিসিতে ফায়ারফক্স ব্যবহার করে ওয়েবসাইটগুলির মোবাইল সংস্করণ দেখার বিকল্পও রয়েছে। এটি কিভাবে করতে হয় তা এখানে:
- আপনার পিসিতে ফায়ারফক্স চালু করুন।
- আপনি যে ওয়েবসাইটটিকে মোবাইল সংস্করণ হিসেবে দেখতে চান সেখানে যান।
- অনুভূমিক তিন-বার আইকনে ক্লিক করে সেটিংসে যান।
- আপনি একটি ড্রপ-ডাউন মেনু দেখতে পাবেন যেখানে আপনাকে একটি ওয়েব ডেভেলপার বিকল্প বেছে নিতে হবে।
- প্রতিক্রিয়াশীল ডিজাইন মোড নির্বাচন করুন।
- অবশেষে, আপনার সাইটটি সেই ডিভাইসে কীভাবে প্রদর্শিত হবে তা দেখতে আপনি একটি স্মার্টফোন মডেল নির্বাচন করতে পারেন।
একটি ম্যাকে সাফারিতে একটি ওয়েবসাইটের মোবাইল সংস্করণটি কীভাবে দেখতে হয়
আমরা ক্রোম এবং ফায়ারফক্স ব্যবহার করে ডেস্কটপে একটি মোবাইল ওয়েবসাইট কীভাবে দেখতে হয় তা কভার করেছি। কিন্তু ম্যাক ডিভাইস, সাফারির সাথে আসা ডিফল্ট ব্রাউজার সম্পর্কে কী? ভাগ্যক্রমে, সাফারিতে একটি ওয়েবসাইটের মোবাইল সংস্করণও দেখা সম্ভব।
- সাফারি ব্রাউজার চালু করুন।
- আপনি মোবাইল সংস্করণ হিসাবে যে ওয়েবসাইটটি দেখতে চান সেখানে যান৷
- বিকল্পগুলিতে ক্লিক করুন এবং তারপরে বিকাশ মেনুতে ক্লিক করুন।
- ড্রপ-ডাউন মেনু থেকে, প্রতিক্রিয়াশীল ডিজাইন মোড এন্টার নির্বাচন করুন।
- আপনি এখন ওয়েবসাইটটির মোবাইল সংস্করণ দেখতে পারেন।
অতিরিক্ত FAQ
আমি কি আমার ফোনে একটি ওয়েবসাইটের ডেস্কটপ সংস্করণ দেখতে পারি?
উত্তরটি হল হ্যাঁ! আপনি কম্পিউটার ব্যবহার না করেই এটি পরীক্ষা করতে মোবাইল সংস্করণ থেকে ডেস্কটপ সংস্করণে স্যুইচ করতে পারেন৷ Chrome-এ মোবাইল সংস্করণটিকে ডেস্কটপ সংস্করণে স্থানান্তর করার পদক্ষেপগুলি নিম্নরূপ:
1. আপনি ডেস্কটপ ভিউতে যে ওয়েবসাইটটি দেখতে চান সেখানে যান৷
2. মেনু অ্যাক্সেস করতে তিন-বিন্দু আইকনে আলতো চাপুন৷
3. এখন ডেস্কটপ ভিউ বিকল্পটি নির্বাচন করুন।
মনে রাখবেন যে আপনি যে ফোন ব্যবহার করছেন তার উপর নির্ভর করে এই পদক্ষেপগুলি পরিবর্তিত হতে পারে।
কীভাবে ফ্ল্যাশ ড্রাইভ থেকে রাইট সুরক্ষা সরিয়ে ফেলা যায়
মোবাইল ওয়েব ডিজাইনিং সহজতর করা
ডেভেলপার টুলগুলি ডিভাইসগুলি স্যুইচ না করে একটি ডেস্কটপে একটি ওয়েবসাইটের একটি মোবাইল সংস্করণ বিশ্লেষণ এবং সংশোধন করার জন্য দুর্দান্ত৷ বিভিন্ন ডিভাইসে উপাদানগুলি কীভাবে কাজ করে তা পর্যবেক্ষণ করতে আপনি পর্দার আকার পরিবর্তন করতে পারেন। আপনি বিভিন্ন উপাদান সামঞ্জস্য করতে পারেন এবং প্রতিক্রিয়াশীল মোড ব্যবহার করে একাধিক স্ক্রীন আকারের জন্য ওয়েবসাইট তৈরি করতে পারেন।
একটি ওয়েবসাইট ডিজাইন করার সময়, ডিজাইনারকে সবসময় মনে রাখতে হবে কিভাবে ফোন, ট্যাবলেট এবং ডেস্কটপে সাইটের সামনের প্রান্তটি প্রদর্শিত হয়। নিবন্ধে বর্ণিত পদ্ধতিগুলি ব্যবহার করে ডেভেলপারকে এটি করতে এবং ওয়েবসাইটটির কোন উপাদানগুলি তাদের সমাধান করতে সমস্যা তৈরি করছে তা সনাক্ত করতেও সহায়তা করতে পারে।
আপনি কি কখনও আপনার ডেস্কটপে একটি সাইটের একটি মোবাইল সংস্করণ দেখার চেষ্টা করেছেন? আপনি এটি করতে কোন ব্রাউজার ব্যবহার করতে পছন্দ করেন? নিচের মন্তব্য অংশে আমাদেরকে জানান।
