چگونه مشکل Size Content to Viewport را حل کنیم؟

تاریخ انتشار 1396/09/04 . 76 . گروه رازهای بهینه سازی سایت seo

زمانیکه تمام صفحه بصورت افقی قابل نمایش برای کاربر نباشد یعنی اندازه viewport متناسب با محتوای صفحه نمی باشد قاعده PageSpeed Insights فعال می شود.

چگونه مشکل Size Content to Viewport را حل کنیم؟

مروری بر Size Content to Viewport

هنگام طراحی سایت باید آن را واکنش گرا طراحی کنیم یعنی در هر دستگاهی چه کامپیوترهای شخصی و چه در تبلت ها و چه در موبایل سایت اسکرول افقی نیندازد که در غیر اینصورت سبب ناخوشایندی کاربران خواهد شد چون آن ها عادت به اسکرول عمودی دارند.

وب سایت برای اینکه هوشمند باشد و تشخیص دهد در چه دستگاهی در حال اجراست می توان از متاتگ viewport استفاده کند این تگ width صفحه را هنگام باز شدن بصورت خودکار تشخیص می دهد و مقدار بزرگ نمایی را کنترل می کند.

باید اندازه ی محتوای صفحه را متناسب با اندازه viewport تنظیم کنید تا بتوانید از ایجاد اسکرول افقی خودداری کنید.

پیشنهادات برای Size Content to Viewport

1. برای عناصر صفحه از تنظیم مقدارها بصورت مطلق در عرض خودداری کنید بلکه آن را بصورت نسبی در عرض تعریف کنید چون ممکن است مناسب دستگاه های مختلف نباشد. مثال:

Absolute: { div { width: 999px} }

Relative: Width: 100%;

2. برای نمایش سبک های مختلف از CSS media queries استفاده کنید.

3. استفاده از تصاویر ریسپانسیو بدون استفاده از reflow در مقاله this article بیان شده است که چطور آن را هنگام بارگذاری استفاده نکنیم.

لی اوت یا reflow مکان دقیق هر المنت در صفحه نمایش را مشخص می کند.

2

نمونه کارهای منتخب

طراحی سایت دکوراسیون دکورچین

گروه مرتبط :
طراحی سایت شرکتی
طراحی سایت دکوراسیون

مشاهده نمونه کار
طراحی سایت فروشگاه ورزشی ایران سی نت

گروه مرتبط :
طراحی سایت فروشگاه اینترنتی

مشاهده نمونه کار
طراحی سایت شرکت کامپیوتری  انفورماتیک کوشا

گروه مرتبط :
طراحی سایت شرکتی

مشاهده نمونه کار
طراحی سایت فروشگاهی زمبورک

گروه مرتبط :
طراحی سایت فروشگاه اینترنتی

مشاهده نمونه کار

گروه مقالات طراحی سایت

جدیدترین مقالات طراحی سایت

شماره تماس پشتیبانی:

شماره تماس پشتیبانی:

نظرات کاربران

نظر شما چیست؟

سوال امنیتی: حاصل جمع 6 + 2 چند است ؟

آنلاین هستیم
آنلاین هستیم