متا تگ چیست؟
با یک مثال آن را معرفی میکنیم:
یک سایت مانند همیشه طراحی کنید و سپس با موبایل به آن سایت بروید.
<!doctype html>
<html dir="rtl" lang="fa" >
<head>
<meta charset="UTF-8">
<title>شرکت طراحی سایت مبنا</title>
</head>
<body>
<p> شرکت طراحی سایت مبنا </p>
</body>
</html>
مشاهده خواهید کرد متن در موبایل نا خوانا بوده و برای خواندن آن نیاز دارید که در صفحه زوم کنید. این علت کاملا منطقی است زیرا گوشی موبایل در برخورد با این صفحه متوجه میشود که این سایت برای کامپیوتر رومیزی طراحی شده است و عرض آن را برای مثال 980 px در نظر میگیرد و عرض آن را با دستگاه موبایل منطبق می کند یعنی صفحه را Zoom out میکند.
برای همین است که گوگل به سایت های ریسپانسیو اهمیت میدهد تا کاربران بتوانند به راحتی از صفحات اینترنت و سایت ها استفاده کنند.
حال به قطعه کد بالا متا تگ viewport را اضافه میکنیم و با موبایل دوباره وارد آن صفحه میشویم :
<!doctype html>
<htmldir="rtl" lang="fa" >
<head>
<meta charset="UTF-8">
<title>شرکت طرح و پردازش مبنا</title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<p>شرکت طرح و پردازش مبنا</p>
</body>
</html>
خوب! همانطور که مشاهده کردید متوجه شدید که سایت دیگر نیازی به زوم کردن ندارد و متن کاملا خوانا است.
در واقع با مقدار دهی device-width به متا تگ viewport به مرورگر دستور داده میشود که عرض گوشی موبایل را با صفحه نمایش تطبیق دهد.
