এই ব্লগটি ব্যাখ্যা করবে কিভাবে HTML এ প্রতিক্রিয়াশীল ওয়েব ডিজাইনের জন্য একটি ভিউপোর্ট মেটা ট্যাগ ব্যবহার করতে হয়:
ভিউপোর্ট মেটা ট্যাগ কি?
দ্য ' ভিউপোর্ট বিভিন্ন স্ক্রীনের আকারে বিষয়বস্তু কীভাবে উপস্থিত হয় তা নিয়ন্ত্রণ করে একটি প্রতিক্রিয়াশীল ডিজাইন তৈরি করার জন্য সবচেয়ে গুরুত্বপূর্ণ ট্যাগ। এই ট্যাগটি 'এর ভিতরে স্থাপন করা হয়েছে <মাথা> ” বিভাগ এবং এটিতে দুটি বৈশিষ্ট্য রয়েছে। প্রথমটি হল ' নাম ' বৈশিষ্ট্য যা এই ট্যাগের উদ্দেশ্য বলে এবং দ্বিতীয়টি হল ' বিষয়বস্তু 'যা 'তে প্রদত্ত মান সম্পর্কিত ডেটা ধারণ করে নাম ” বৈশিষ্ট্য।
ভিউপোর্ট মেটা ট্যাগের বিভিন্ন বৈশিষ্ট্য
ভিউপোর্ট মেটা ট্যাগে নিম্নলিখিত বৈশিষ্ট্য রয়েছে যা 'এর মান হিসাবে স্থাপন করা যেতে পারে বিষয়বস্তু ' বৈশিষ্ট্য:
'প্রস্থ' বৈশিষ্ট্য
দ্য ' প্রস্থ ” বৈশিষ্ট্য উল্লম্বভাবে বিষয়বস্তুর জন্য একটি ওয়েবপৃষ্ঠার দৃশ্যমান এলাকা নির্দিষ্ট করে৷ এর মেটা ট্যাগ দেখতে এইরকম:
< মেটা নাম = 'ভিউপোর্ট' বিষয়বস্তু = 'প্রস্থ = ডিভাইস-প্রস্থ' >
'উচ্চতা' বৈশিষ্ট্য
দ্য ' উচ্চতা ” অ্যাট্রিবিউট ওয়েবপেজের উল্লম্ব দৈর্ঘ্য সেট করে যাতে ভিউপোর্টের উচ্চতা স্ক্রিনের উচ্চতার সাথে মেলে। এর মেটা ট্যাগ দেখতে এইরকম:
< মেটা নাম = 'ভিউপোর্ট' বিষয়বস্তু = 'উচ্চতা = 400' >
'প্রাথমিক-স্কেল' বৈশিষ্ট্য
দ্য ' প্রাথমিক-স্কেল ” বৈশিষ্ট্য নিশ্চিত করে যে ওয়েবপৃষ্ঠাটি প্রথম লোড করার সময় একটি উপযুক্ত জুম স্তরে প্রদর্শিত হবে। উদাহরণস্বরূপ, নীচের কোড দেখুন:
< মেটা নাম = 'ভিউপোর্ট' বিষয়বস্তু = 'প্রস্থ=ডিভাইস-প্রস্থ, প্রাথমিক-স্কেল=1.0' >'সর্বোচ্চ-স্কেল' বৈশিষ্ট্য
দ্য ' সর্বোচ্চ-স্কেল লেআউট সমস্যা প্রতিরোধ করার জন্য 'বিশেষণ ওয়েবপৃষ্ঠার জন্য সর্বাধিক জুম স্তর নির্দিষ্ট করে:
< মেটা নাম = 'ভিউপোর্ট' বিষয়বস্তু = 'প্রস্থ=ডিভাইস-প্রস্থ, সর্বোচ্চ-স্কেল=1.0' >
'ন্যূনতম-স্কেল' বৈশিষ্ট্য
দ্য ' সর্বনিম্ন-স্কেল ন্যূনতম জুম-আউট স্কেল স্তর নির্দিষ্ট করে ব্যবহারকারীকে খুব বেশি জুম আউট করা থেকে সীমাবদ্ধ করতে ব্যবহার করা হয়:
< মেটা নাম = 'ভিউপোর্ট' বিষয়বস্তু = 'প্রস্থ=ডিভাইস-প্রস্থ, ন্যূনতম-স্কেল=0.5' >'ব্যবহারকারী-স্কেলযোগ্য' বৈশিষ্ট্য
দ্য ' ব্যবহারকারী-মাপযোগ্য ” অ্যাট্রিবিউট ব্যবহারকারীকে মান সেট করে ওয়েবপেজ স্ক্রীন জুম আউট বা জুম ইন করার অনুমতি দেয় বা দেয় না না 'বা' হ্যাঁ ” মেটা ট্যাগ যা ব্যবহারকারীকে জুম ইন বা আউট করতে দেয়:
< মেটা নাম = 'ভিউপোর্ট' বিষয়বস্তু = 'প্রস্থ=ডিভাইস-প্রস্থ, ব্যবহারকারী-স্কেলযোগ্য=হ্যাঁ' >HTML-এ প্রতিক্রিয়াশীল ওয়েব ডিজাইনের জন্য ভিউপোর্ট মেটা ট্যাগ কীভাবে ব্যবহার করবেন?
প্রতিক্রিয়াশীল ওয়েব ডিজাইনের জন্য একটি ভিউপোর্ট মেটা ট্যাগের ব্যবহার আরও ভালভাবে বোঝার জন্য। আসুন একটি উদাহরণের মাধ্যমে চলুন:
ধরুন ভিতরে ' উপরের কোড স্নিপেট সংকলনের পরে, ওয়েবপৃষ্ঠাটি এইরকম দেখায়: আউটপুট দেখায় যে বিষয়বস্তু প্রতিক্রিয়াশীল নয় কারণ এটি ছোট ডিভাইসে পুরোপুরি প্রদর্শিত হচ্ছে না। এখন এটিকে প্রতিক্রিয়াশীল করতে যোগ করুন ' ভিউপোর্ট ' মেটা ট্যাগ: কোড আপডেট করার পরে, ওয়েবপৃষ্ঠাটি বিভিন্ন স্ক্রীন আকারে এর মতো দেখায়: চূড়ান্ত আউটপুটটি ব্যাখ্যা করে যে ওয়েবপেজটি এখন 'এর ভিতরে একটি মেটা ট্যাগ যুক্ত করার পরে প্রতিক্রিয়াশীল <মাথা> ট্যাগ ভিউপোর্ট মেটা ট্যাগ বিকাশকারীকে ব্রাউজারে নির্দেশাবলীর একটি সেট প্রদান করতে দেয় যা সেট করে যে ওয়েবপৃষ্ঠাটি বিভিন্ন স্ক্রীন আকারের ডিভাইসে কীভাবে প্রদর্শিত হবে। মেটা ট্যাগটি 'এর ভিতরে স্থাপন করা হয়েছে <মাথা> ট্যাগ এবং এমন বৈশিষ্ট্য রয়েছে যা প্রতিক্রিয়াশীল ওয়েবসাইট ডিজাইন তৈরি করতে সহায়তা করে। এই ব্লগটি দেখিয়েছে কিভাবে HTML এ প্রতিক্রিয়াশীল ওয়েব ডিজাইনের জন্য একটি ভিউপোর্ট মেটা ট্যাগ ব্যবহার করতে হয়। ট্যাগ: < div >
< পি >
< খ লিনাক্সহিন্ট দ্বারা চালিত, ভিউপোর্ট মেটা ট্যাগটি আরও ভালভাবে বোঝার জন্য বিভিন্ন স্ক্রিনে ওয়েবপৃষ্ঠাটি খুলুন আকার ডিভাইস।< / খ >
< / পি >
< img src = '../bg.jpg' সবকিছু = 'হ্যাকার' প্রস্থ = '460' উচ্চতা = '3. 4. 5' >
< পি শৈলী = 'প্যাডিং:5px' >
< i >লিনাক্সহিন্ট টিমে যোগ দিন < / i >
লিনাক্সহিন্ট দ্বারা চালিত, ভিউপোর্ট মেটা ট্যাগটি আরও ভালভাবে বোঝার জন্য বিভিন্ন স্ক্রিনে ওয়েবপৃষ্ঠাটি খুলুন আকার Linuxhint দ্বারা চালিত ডিভাইস, ভিউপোর্ট মেটা ট্যাগ ভালোভাবে বুঝতে বিভিন্ন স্ক্রিনে ওয়েবপেজ খুলুন আকার Linuxhint দ্বারা চালিত ডিভাইস, ভিউপোর্ট মেটা ট্যাগ ভালোভাবে বুঝতে বিভিন্ন স্ক্রিনে ওয়েবপেজ খুলুন আকার Linuxhint দ্বারা চালিত ডিভাইস, ভিউপোর্ট মেটা ট্যাগ ভালোভাবে বুঝতে বিভিন্ন স্ক্রিনে ওয়েবপেজ খুলুন আকার ডিভাইস
< / পি >
< / div >
< মেটা নাম = 'ভিউপোর্ট' বিষয়বস্তু = 'প্রস্থ=ডিভাইস-প্রস্থ, প্রাথমিক-স্কেল=1.0' / >
< / মাথা >
উপসংহার