একটি ভিউপোর্ট মেটা ট্যাগ ছাড়া, মোবাইল ডিভাইসগুলি সাধারণ ডেস্কটপ স্ক্রীন প্রস্থে পৃষ্ঠাগুলি রেন্ডার করে এবং তারপর পৃষ্ঠাগুলিকে ছোট করে, তাদের পড়া কঠিন করে তোলে৷
ভিউপোর্ট মেটা ট্যাগ সেট করা আপনাকে ভিউপোর্টের প্রস্থ এবং স্কেলিং নিয়ন্ত্রণ করতে দেয় যাতে এটি সমস্ত ডিভাইসে সঠিকভাবে মাপ হয়।
কিভাবে লাইটহাউস ভিউপোর্ট মেটা ট্যাগ অডিট ব্যর্থ হয়
একটি ভিউপোর্ট মেটা ট্যাগ ছাড়াই বাতিঘর পতাকা পৃষ্ঠাগুলি:
এই সমস্ত শর্ত পূরণ না হলে একটি পৃষ্ঠা অডিট করতে ব্যর্থ হয়: - নথির <head> একটি <meta name="viewport"> ট্যাগ রয়েছে। - ভিউপোর্ট মেটা ট্যাগে একটি content বৈশিষ্ট্য রয়েছে। - content অ্যাট্রিবিউটের মান টেক্সট width= অন্তর্ভুক্ত করে।
ভিউপোর্ট মেটা ট্যাগ কিভাবে যোগ করবেন
আপনার পৃষ্ঠার <head> এ উপযুক্ত কী-মানের জোড়া সহ একটি ভিউপোর্ট <meta> ট্যাগ যোগ করুন:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
প্রতিটি কী-মান পেয়ার যা করে তা এখানে: - width=device-width ভিউপোর্টের প্রস্থকে ডিভাইসের প্রস্থের সাথে সেট করে। - initial-scale=1 ব্যবহারকারী যখন পৃষ্ঠাটি পরিদর্শন করে তখন প্রাথমিক জুম স্তর সেট করে।
প্রাথমিক-স্কেল 1 এর কম
যেখানে initial-scale 1 এর কম সেট করা হয়, এটি ব্রাউজারগুলিকে জুম করার জন্য একটি ডবল ট্যাপ সক্রিয় করতে পারে, সাধারণত ডেস্কটপ সাইটগুলির জন্য ব্যবহৃত হয় যেগুলি মোবাইল অপ্টিমাইজ করা হয় না। এটি যেকোনো ট্যাপ ইন্টারঅ্যাকশনে 300 মিলিসেকেন্ড বিলম্ব যোগ করে যখন ব্রাউজারটি দ্বিতীয় "ডাবল" ট্যাপ হয় কিনা তা পরীক্ষা করার জন্য অপেক্ষা করে। তাই অডিটও ব্যর্থ হয় যখন প্রাথমিক-স্কেল 1-এর কম সেট করা হয়।