منظور از Viewport چیست؟ متا تگ viewport در صفحات واکنش گرا یا responsive چه کاربردی دارد؟ در این مقاله با متا تگ ویو پورت آشنا میشویم.
سرفصلهای پست
آشنایی با ViewPort
ویو پورت منطقه قابل نمایش برای کاربر در یک صفحه وب است.
ویو پورت برای هر دستگاه متفاوت است، به عنوان مثال ویو پورت بر روی گوشی کوچکتر از صفحه کامپیوتر است.
قبل از رواج تبلت و موبایل ها، صفحات وب فقط برای کامپیوتر طراحی میشدند، از این رو اندازه های این صفحات ثابت بود.
پس از رواج استفاده از تبلت و موبایل ها، صفحات وب برای نمایش بر روی این دستگاه ها که دارای ویو پورت کوچکی بودند بسیار بزرگ بود. برای حل این مشکل مرورگر های این دستگاه ها تمام صفحه را کوچک می کردند تا با اندازه صفحه دستگاه یکسان شود.
بنابر این به طور کلی ویو پورت یک تگ Meta است که در بخش تگ head قرار میگیرد که بخش قابل مشاهده صفحات وب توسط کاربر در دستگاه ها یا مانیتور میباشد. اگر ویو پورت اشتباهی را وارد کنیم، باعث میشود که اسکرول عرضی در صفحه ایجاد شود تا صفحه به درستی نمایش داده شود که باعث کاهش تجربه کاربری میشود.
چرا ویو پورت پر اهمیت است؟
در نتایج موتور های جستجو ( SERP ) یکی از فاکتور های پر اهمیت برای رتبه بندی صفحات Mobile-Friendly بودن صفحات است به این معنی که صفحات وب سایت ما در هر دستگاه موبایلی بهترین نمایش را داشته باشند و کاربر برای دستیابی به مطالب به کمترین میزان اسکرول و تغییر سایز صفحه نیاز داشته باشد.
طراحی رسپانسیو ( واکنش گرا ) در صفحات بسیار پر اهمیت و ضروریست است چون انتظار میرود که وب سایت ما توسط هر کاربری با هر نوع و سایز صفحه نمایشی دیده شود. این وظیفه شماست که بهترین نحوه نمایش را برای صفحات خود را با استفاده از viewport درست ارائه دهید.
تاثیر ویو پورت موبایل در سئو
تنظیم ویو پورت موبایل برای وب سایت بسیار آسان است و یکی از تاثیر گذار ترین راه برای افزایش سطح دوستانه بودن صفحه با موبایل (Friendliness) میباشد.
گوگل در توضیحات آموزشی خود در رابطه با طراحی صفحات رسپانسیو در ابتدایی ترین توضیحات خود به ویو پورت اشاره کرده است که این اهمیت بالای ویو پورت را نمایش میدهد که برای سئو باید هر کسی در وب سایت خود به آن توجه داشته باشد.
برای تشویق کاربران به تنظیم ویو پورت گوگل در توضیحاتش با ابتکار عمل خود اینطور توضیح داده است : « صفحات برای بهینه بودن در دستگاه های مختلف میبایست متا تگ ویو پورت را در صفحات خود در بخش Head خود وارد کنند ».
تنظیم Viewport
نسخه HTML5 یک روش برای طراحان وب ارائه کرد که توسط آن امکان تحت اختیار در آوردن ویو پورت از طریق تگ <meta>
فراهم می شود.
برای تنظیم یک ویو پورت بر روی صفحه وب باید از کد های زیر استفاده کنید.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
متای ویو پورت به مرورگر دستورالعمل نحوه کنترل ابعاد و مقیاس صفحه را میدهد.
بخش اول محتوای متا width=device-width
طول صفحه وب را برابر با طول صفحه دستگاه قرار میدهد (که برای هر دستگاه متفاوت است).
قسمت دوم آن مقدار بزرگنمایی(زوم) صفحه را هنگام بارگیری تعیین میکند.
[box type=”note” align=”aligncenter” class=”” width=””]مقادیر قرار گرفته در این نمونه، مقدار پیشنهادی گوگل برای تمامی صفحات است. بنابر این پیشنهاد میکنیم که صفحات خود را نسبت به این مقادیر واکنش گرا طراحی کنید.[/box]اندازه محتوا
کاربران وبسایت ها را چه در کامپیوتر و چه در سایر دستگاه ها به صورت عمودی اسکرول میکنند. اگر کاربر مجبور شود برای دیدن کل صفحه به صورت افقی اسکرول کند یا مجبور به کوچک نمایی شود، آن وبسایت دارای تجربه کاربری ضعیفی است.
در استفاده از ویو پورت ها قوانین بیشتری برای لحاظ کردن وجود دارند که به شرح زیر هستند.
- از عناصر بزرگ با طول ثابت استفاده نکنید – به عنوان مثال، اگر یک تصویر در یک اندازه بزرگ تر از اندازه ویو پورت نمایش داده شود، می تواند باعث ایجاد اسکرول افقی شود. به خاطر داشته باشید همیشه اندازه محتوای داخل صفحه را با اندازه ویو پورت یکسان کنید.
- اجازه ندهید محتوای صفحه بر روی اندازه طولی یک ویو پورت خاص تکیه کند – از آنجایی که اندازه صفحه و طول آن بر روی دستگاه های مختلف در واحد پیکسل های css متفاوت است. محتوای تنظیم شده نباید بر روی اندازه طولی یک ویو پورت خاص تکیه کند.
- از قابلیت مدیا کوئری داخل css برای تنظیم استایل های متفاوت در صفحه نمایش های بزرگ و کوچک استفاده کنید – استفاده از اندازه های مطلق در css برای عناصر داخل صفحه ممکن است باعث طولانی شدن طول عناصر برای صفحه های کوچک شود. به جای آن استفاده از مقدار دهی وابسته مانند 100% برای طول می تواند راه حل مناسبی باشد. همچنین مراقب باشید در تنظیم موقعیت عناصر داخل صفحه، عناصر ممکن است بر روی دستگاه های با ویو پورت کوچک تر به بیرون از صفحه هدایت شوند.
پایان ترم
[box type=”info” class=”question-from-users” width=””]چرا باید از viewport استفاده کنیم؟
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبتنام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
در این مقاله به صورت کامل با ویو پورت آشنا شدیم، در طراحی وب حتما باید این متا تگ را جدی بگیرید چرا که به سئو وب سایت شما خیلی کمک میکند و همچنین یکی از مهمترین تگ ها برای طراحی واکنش گرا هست.
در انتها چند نکته را در نظر بگیرید :
- این متا تگ مثل بقیه متا تگ ها حتما در بخش Head قرار میگیرد.
- در وارد کردن مقادیر دقت کنید که مقدار درست را وارد کنید تا صفحه شما بهم نریزد و از حالت Mobile-Friendly خارج نشود.
- از قوانین اندازه محتوا در CSS حتما استفاده کنید.
این مقاله نیز به پایان رسید. امیدوارم توضیحاتم اهمیت بالای این متا تگ را مشخص کرده باشد. اگر سوال، پیشنهاد یا انتقادی داشتید حتما بپرسید و من در اولین فرصت پاسخ خواهم داد.
تا مقاله بعدی…
7 پاسخ
جواب سوال:
چون باعث بهبود تجربه کاربری وبسایت برای کاربران می شه و وبسایت در انواع دستگاه ها با صفحات نمایش بزرگ و کوچک ، کارایی و تجربه کاربری مناسب خودش رو حفظ می کنه ، همچنین بخاطر تاثیر mobile-friendly بودن صفحات بر رتبه بندی اونها در موتورهای جستجو و سئو ، لازمه توجه ویژه ای به viewport داشته باشیم
سلام چون viewport باعث میشه صفحه ما در هر دیوایسی در هر اندازه وابسته به سایز اون تغییر کنه و وقتی ربات سئو گوگل میبینه
ریسپانسیوه سئو سایت افزایش پیدا میکنه.
درست گفتی ممنونم علی جان. ادامه بده.
چون viewport باعث میشه که سایت ما در دستگاه های دیگر نمایش داده شود و این باعث افزایش seoهم میشود
سلام علی اکبر، خوب گفتی. درسته.
پاسخ سوال :
*در دستگاه های مختلف قابل نمایش باشد و کاربر به حداقل اسکرول و تغییر اندازه صفحه نیاز داشته باشد.
*یکی از تگ های مهم در طراحی واکنش گرا
*اهمیت داشتن از نظر سئو
سلام و درود محمد عزیز، بله نکاتی که گفتی درسته. ممنونم.