স্ক্রীন রেজোলিউশন সিমুলেটর যেকোন ওয়েবপেজের পূর্বরূপ
যেকোনো স্ক্রিনের সাথে মানানসই একটি লাইভ ওয়েবসাইট প্রিভিউ তৈরি করুন।
একটি জনপ্রিয় ডিভাইস বেছে নিন, ওরিয়েন্টেশনটি উল্টান, অথবা সঠিক পিক্সেল আকারে ডায়াল করুন। আমরা আপনার পছন্দের আকারের একটি স্যান্ডবক্সযুক্ত উইন্ডো খুলব যাতে আপনি দ্রুত প্রতিক্রিয়াশীল লেআউটগুলিতে পুনরাবৃত্তি করতে পারেন।
সিমুলেশন সারাংশ
- ভিউপোর্ট প্রস্থ
- ভিউপোর্টের উচ্চতা
- আকৃতির অনুপাত
- প্রিসেট
স্কেল করা ভিউপোর্ট প্রিভিউ
ভিজ্যুয়াল ফ্রেমটি আপনার আকৃতির অনুপাতের প্রতিফলন ঘটায়। এই আকারে লাইভ সাইটের সাথে ইন্টারঅ্যাক্ট করতে প্রিভিউ উইন্ডোটি চালু করুন।
কপি করার জন্য প্রস্তুত CSS সাহায্যকারী
রেসপন্সিভ ডিজাইন চেকলিস্ট
- আপনার ব্রাউজার ডেভটুলগুলির সাথে এই টুলটি একত্রিত করে ব্রেকপয়েন্ট যাচাই করুন—সামঞ্জস্যপূর্ণ QA-এর জন্য একই পিক্সেল প্রস্থ লক্ষ্য করুন।
- মোবাইল লেআউটের জন্য উভয় ওরিয়েন্টেশন পরীক্ষা করুন; সিমুলেটরটি তাৎক্ষণিকভাবে প্রস্থ এবং উচ্চতা অদলবদল করে।
- স্টেকহোল্ডারদের জন্য UI অবস্থা নথিভুক্ত করতে বা রিলিজ নোটের জন্য পপআপ উইন্ডো থেকে স্ক্রিনশট ক্যাপচার করুন।
সূচি তালিকা
কয়েক সেকেন্ডের মধ্যে ফোন, ট্যাবলেট, ল্যাপটপ এবং আল্ট্রা-ওয়াইড মনিটরে একটি পৃষ্ঠা কেমন দেখায় তা দেখুন। স্ক্রিন রেজোলিউশন সিমুলেটর একটি দ্রুত এবং অভিযোজিত পরীক্ষার সরঞ্জাম হিসাবে কাজ করে। এটি ভিউপোর্ট চেক করার জন্যও ভাল কাজ করে। একটি ইউআরএল পেস্ট করুন, একটি আকার চয়ন করুন এবং একটি নির্ভরযোগ্য ওয়েবসাইট প্রিভিউ সরঞ্জাম দিয়ে তাত্ক্ষণিকভাবে পূর্বরূপ দেখুন।
বিভিন্ন আকারে যে কোনও পৃষ্ঠার পূর্বরূপ দেখুন
লঞ্চের আগে লেআউটগুলি যাচাই করার জন্য আপনার দলকে একটি দ্রুত উপায় দিন। আপনি একটি URL প্রতিলেপন করতে পারেন, একটি প্রিসেট চয়ন করতে পারেন বা কাস্টম আকারগুলি লিখতে পারেন। এটি আপনাকে বিভিন্ন আকারে ওয়েবসাইট পরীক্ষা করতে সহায়তা করে। আপনি কোনও ডিভাইস ল্যাব বা বিকাশকারী সরঞ্জামগুলির প্রয়োজন ছাড়াই তাড়াতাড়ি সমস্যাগুলি খুঁজে পেতে পারেন।
শুরু করতে একটি URL লিখুন
একটি লাইভ, স্টেজিং বা শেয়ার লিঙ্ক ব্যবহার করুন। এইভাবে, ফন্ট, স্ক্রিপ্ট, অ্যানালিটিক্স এবং সামগ্রী ব্যবহারকারীরা যেমন দেখেন ঠিক তেমন দেখাবে। এটি মোবাইল প্রিভিউ এবং ডেস্কটপ চেক উভয়ের জন্য গুরুত্বপূর্ণ।
একটি প্রিসেট চয়ন করুন বা কাস্টম মাত্রা বডি সেট করুন
সাধারণ মোবাইল, ট্যাবলেট এবং ডেস্কটপের আকারগুলির মধ্যে স্যুইচ করুন। ডিজাইন চশমা এবং ডেটা আউটলিয়ারগুলির সাথে মেলে আপনি একটি নির্দিষ্ট প্রস্থ এবং উচ্চতাও প্রবেশ করতে পারেন। এটি পিক্সেল-সমালোচনামূলক পৃষ্ঠাগুলির জন্য ওয়েবপৃষ্ঠা আকারের পরীক্ষক হিসাবে দ্বিগুণ হয়।
পোর্ট্রেট বা ল্যান্ডস্কেপ ঘোরান এবং নতুন ট্যাবে খুলুন
ট্যাবলেট এবং ফোনের প্রান্তের কেসগুলি প্রকাশ করতে ওরিয়েন্টেশন ফ্লিপ করুন। স্ক্রিনশটগুলি শেয়ার করতে এবং একটি দ্রুত সাইন-অফ পেতে একটি নতুন ট্যাবে পূর্বরূপটি খুলুন।
কেন একটি স্ক্রিন রেজোলিউশন সিমুলেটর ব্যবহার করবেন
মূল সামগ্রী ভাঁজের উপরে রাখুন
নায়ক, শিরোনাম এবং প্রাথমিক সিটিএ 390 থেকে 414 পিক্সেলের মতো ছোট প্রস্থে দৃশ্যমান থাকে তা নিশ্চিত করুন। আপনি গুরুত্বপূর্ণ ক্রিয়াকলাপগুলি লুকালে, আপনি চালু করার আগে ব্যবধান পরিবর্তন করতে, পাঠ্য সংক্ষিপ্ত করতে বা অংশগুলি পুনরায় আকার দিতে পারেন।
নেভিগেশন, গ্রিড এবং ফর্মগুলি যাচাই করুন
স্ট্রেস টেস্ট হ্যামবার্গার মেনু, স্টিকি শিরোনাম এবং অফ-ক্যানভাস প্যানেলগুলি। অদ্ভুত লেআউট শিফটের জন্য কার্ড গ্রিডগুলি পরীক্ষা করুন এবং নিশ্চিত করুন যে ফর্মগুলি টাচ স্ক্রিনে পঠনযোগ্য এবং ট্যাপযোগ্য রয়েছে।
লঞ্চের আগে প্রতিক্রিয়াশীল ব্রেকপয়েন্টগুলি নিশ্চিত করুন
কম্পোনেন্টগুলি কোথায় স্থানান্তরিত হয় তা দেখার জন্য সাধারণ প্রস্থগুলি ঝাড়ু দিন। যদি এটি 360 এবং 414 এ থাকে তবে 390 এ ভেঙে যায় তবে একটি ব্রেকপয়েন্ট যুক্ত করুন। নকশাটি আরও ভাল কাজ করতে আপনি সর্বনিম্ন এবং সর্বাধিক প্রস্থগুলিও সামঞ্জস্য করতে পারেন।
স্ক্রিন রেজোলিউশন সিমুলেটর কীভাবে কাজ করে
জনপ্রিয় ফোন, ট্যাবলেট এবং ডেস্কটপ প্রিসেট
গো-টু প্রস্থের সাথে বেশিরভাগ দৃশ্য দ্রুত কভার করুন
320, 360, 390, 414, 768, 1024, 1280, 1440, 1920, 2560, 3840
উচ্চতা অনুসারে পিক্সেল পারফেক্ট কাস্টম প্রস্থ
ল্যান্ডিং পৃষ্ঠাগুলি, ড্যাশবোর্ডগুলি এবং অ্যাপের মতো বিন্যাসগুলির জন্য সঠিক মাত্রা লিখুন। আপনার যখন একটি সুনির্দিষ্ট ডেস্কটপ রেজোলিউশন পরীক্ষকের প্রয়োজন হয় তখন আদর্শ।
ভিউপোর্ট বনাম স্ক্রিন রেজোলিউশন
ভিউপোর্ট হ'ল সিএসএসের অঞ্চল যা বিভিন্ন ডিভাইসে জিনিসগুলি কীভাবে দেখায় তা নিয়ন্ত্রণ করে। স্ক্রিন রেজোলিউশন ডিভাইসের পিক্সেল গ্রিডকে বোঝায়। রেজোলিউশনকে পটভূমি হিসাবে বিবেচনা করুন। প্রথমে ভিউপোর্টে ফোকাস করুন।
স্ক্রিন রেজোলিউশন সিমুলেটর কীভাবে ব্যবহার করবেন
URL আটকান, তারপরে আকার বাছাই করুন, তারপরে পূর্বরূপ দেখুন
. ছোট থেকে বড় পর্যন্ত কাজ করুন। মোবাইল থেকে ট্যাবলেট থেকে ডেস্কটপ থেকে বড় ডেস্কটপ। এই ক্রমটি স্ট্রেস পয়েন্টগুলিকে তাড়াতাড়ি প্রকাশ করে এবং পুনরায় কাজ হ্রাস করে।
সমস্যাগুলি স্পট করুন এবং স্ক্রিনশট ক্যাপচার করুন
শিরোনাম, হিরো, প্রাথমিক সিটিএ, পণ্য কার্ড, ফর্ম এবং পাদচরণ স্ক্যান করুন। মেনু মোড়কের মতো সমস্যা প্রস্থগুলি 390 পিক্সেল এ ক্যাপচার করুন এবং দ্রুত টার্নঅ্যারাউন্ডের জন্য সংক্ষিপ্ত ফিক্স নোট যুক্ত করুন।
মসৃণ লেআউটের জন্য প্রো টিপস
· মেনু লেবেল ছোট রাখুন এবং মূল ক্রিয়াটি প্রথমে রাখুন।
· এতিমদের এড়াতে সংবেদনশীল ফাঁক সহ নমনীয় গ্রিড ব্যবহার করুন
· মিডিয়া কন্টেইনারগুলি সংজ্ঞায়িত করুন এবং লেআউট শিফট রোধ করার জন্য প্রতিক্রিয়াশীল চিত্রগুলি ব্যবহার করুন
স্ক্রিন রেজোলিউশন সিমুলেটর সংশোধন এবং দ্রুত জয়
মেনু ওভারল্যাপ এবং স্টিকি শিরোনামগুলি ঠিক করুন
লেবেলগুলি সংক্ষিপ্ত করুন, গৌণ লিঙ্কগুলি ওভারফ্লোতে সরান, প্যাডিং হ্রাস করুন এবং স্টিকি অফসেটগুলি যাচাই করুন যাতে সামগ্রী লুকানো না থাকে।
ট্যাবলেটের প্রস্থে কার্ড মোড়ানো উন্নত করুন
প্রায় 768 থেকে 1024 পিএক্স অনুমানযোগ্য ফাঁক সহ দুটি অবিচলিত কলামে স্যুইচ করে। প্রায় তিনটি কলাম এড়িয়ে চলুন যা ছিঁড়ে যাওয়া মোড়ককে বাধ্য করে।
প্রতিক্রিয়াশীল উত্স সহ তীক্ষ্ণ চিত্র
srcset এবং আকারের মতো প্রতিক্রিয়াশীল চিত্রগুলি সরবরাহ করুন এবং ধারকের আকারগুলি সংজ্ঞায়িত করুন। লেআউটটি স্থিতিশীল রাখার সময় আপনি মোবাইল এবং ডেস্কটপ উভয়ের জন্য খাস্তা ভিজ্যুয়াল পাবেন।
এই সরঞ্জামগুলির সাথে আরও অপ্টিমাইজ করুন
গুগল এসইআরপি সিমুলেটর: প্রকাশের আগে শিরোনাম এবং মেটা পূর্বরূপ দেখুন।
স্পাইডার সিমুলেটর: ক্রলাররা আপনার পৃষ্ঠায় কী ক্যাপচার করে তা সন্ধান করুন
গ্রাফ চেক খুলুন: শেয়ার শিরোনাম, বিবরণ এবং চিত্র যাচাই করুন।
ব্যবহারকারী এজেন্ট স্ট্রিং ভিউয়ার: সনাক্ত করা ব্রাউজার এবং ডিভাইসের বিশদ নিশ্চিত করুন।
স্ক্রিন রেজোলিউশন পরিবর্তন করুন: ডেমো বা স্ক্রিনশটগুলির জন্য আপনার নিজের ডিসপ্লে স্যুইচ করুন।
কন্ট্রোলার কম্পন পরীক্ষক: ব্রাউজার গেমপ্যাড সনাক্তকরণ এবং রাম্বলে যাচাই করুন।
API ডকুমেন্টেশন শীঘ্রই আসছে
Documentation for this tool is being prepared. Please check back later or visit our full API documentation.
সচরাচর জিজ্ঞাস্য
-
এটি লেআউট চেকগুলিকে ত্বরান্বিত করে এবং বেশিরভাগ প্রতিক্রিয়াশীল সমস্যাগুলি ধরতে পারে। স্ক্রোল আচরণ, রেন্ডারিং এবং ইনপুটের মতো হার্ডওয়্যার কুইর্কগুলির জন্য, টার্গেট ডিভাইস এবং ব্রাউজারগুলিতে স্পট চেক করুন।
-
হ্যাঁ। আপনার নকশা সিস্টেম বা বিশ্লেষণের আউটলিয়ারগুলির সাথে মেলে যাওয়ার জন্য সুনির্দিষ্ট প্রস্থ এবং উচ্চতা লিখুন। ভাঁজ-সংবেদনশীল ল্যান্ডিং পৃষ্ঠাগুলির জন্য দুর্দান্ত।
-
লেআউটটি মূলত প্রস্থের উপর নির্ভর করে, তবে ঘনত্ব চিত্রের তীক্ষ্ণতা এবং কিছু মিডিয়া কোয়েরিগুলিকেও প্রভাবিত করে। ভিজ্যুয়ালগুলি সামঞ্জস্যপূর্ণ কিনা তা নিশ্চিত করার জন্য এটি একটি ঘন প্রস্থ এবং এক স্ট্যান্ডার্ড প্রস্থে পরীক্ষা করুন।