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

  • تاریخ انتشار 1396/09/04
  • .
  • 910
  • .
  • گروه رازهای 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 مکان دقیق هر المنت در صفحه نمایش را مشخص می کند.

8

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

طراحی سایت فروشگاهی مارکت سلام

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

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

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

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

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

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

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

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

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

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

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

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

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

مشاهده نمونه کار
طراحی سایت آکادمی بین المللی علوم گرجستان

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

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

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

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

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

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

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

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

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

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

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

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

نظر شما چیست؟

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

x
02122324883    09198585818
آیا به مشاوره نیاز دارید؟

تماس بگیرید
021-22324883(مشاوره رایگان)

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