অনেক সার্চ ইঞ্জিন পৃষ্ঠাগুলি কতটা মোবাইল-বান্ধব তার উপর ভিত্তি করে র্যাঙ্ক করে। একটি ভিউপোর্ট মেটা ট্যাগ ছাড়া, মোবাইল ডিভাইসগুলি সাধারণ ডেস্কটপ স্ক্রীন প্রস্থে পৃষ্ঠাগুলি রেন্ডার করে এবং তারপর পৃষ্ঠাগুলিকে ছোট করে, তাদের পড়া কঠিন করে তোলে৷
ভিউপোর্ট মেটা ট্যাগ সেট করা আপনাকে ভিউপোর্টের প্রস্থ এবং স্কেলিং নিয়ন্ত্রণ করতে দেয় যাতে এটি সমস্ত ডিভাইসে সঠিকভাবে মাপ হয়।
কিভাবে লাইটহাউস ভিউপোর্ট মেটা ট্যাগ অডিট ব্যর্থ হয়
একটি ভিউপোর্ট মেটা ট্যাগ ছাড়াই বাতিঘর পতাকা পৃষ্ঠাগুলি:
এই সমস্ত শর্ত পূরণ না হলে একটি পৃষ্ঠা অডিট করতে ব্যর্থ হয়: - নথির <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 ব্যবহারকারী যখন পৃষ্ঠাটি পরিদর্শন করে তখন প্রাথমিক জুম স্তর সেট করে।