اندازه محتوا برای Viewport

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

بررسی اجمالی Size Content to Viewport

کاربران، چه در دستگاه های دسکتاپ و چه در تلفن های همراه، عادت به پیمایش وب سایت به صورت عمودی دارند و معمولا به صورت افقی این کار را انجام نمی دهند. در نتیجه وادار کردن کاربران به حرکت به صورت افقی یا استفاده از زوم (کوچک نمایی) به منظور دیدن محتوای کل صفحه، باعث عدم رضایت آنها می گردد.

یکی از مهمترین تنظیمات برای داشتن وب سایت واکنش گرا و نسخه تلفن همراه آن، استفاده از متا تگ Viewport است. به کمک این تگ می توانید عرض وب سایت خود را نسبت به عرض مفید نمایشگر کاربر در زمان باز شدن وب سایت و همچنین میزان زوم را کنترل کنید. به عبارت دیگر، به کمک این تگ می توانید از مرورگر خواسته تا عرض وب سایت شما را در زمان باز شدن، برابر با فضای مفید نمایشگر کاربر قرار دهد. از سوی دیگر، کنترل حداکثر میزان زوم و غیر فعال کردن آن را نیز می توانید به کمک این تگ تعریف کنید.

هنگامی که در حال توسعه یک سایت تلفن همراه با متا تگViewport  هستید، این احتمال وجود دارد که تصادفا، محتوای صفحه ایجاد شده، به طور کامل متناسب باViewport  تعریف شده نباشد. به عنوان مثال، تصویری که با عرض بیشتر از Viewport نمایش داده شده است، می تواند باعث حرکت افقی Viewport گردد. شما باید این محتوا را  متناسب با عرض Viewport تنظیم کنید، به طوری که کاربر نیازی به حرکت افقی در صفحه نمایش خود نداشته باشد.

توصیه ها برای Size Content to Viewport

از آنجایی که ابعاد صفحه نمایش به طور وسیعی بین دستگاه های مختلف (به عنوان مثال بین تلفن های همراه و تبلت ها و حتی بین تلفن های همراه مختلف)، تغییر می کند، باید Viewport را طوری پیکربندی کنید (configure the viewport) که صفحات شما به درستی در دستگاه های مختلف نمایش داده شوند. با این حال، از آنجایی که عرض Viewport (در پیکسل های CSS)، ممکن است متفاوت باشد، برای نمایش مناسب، محتوای صفحه شما نباید متکی بر عرض یک Viewport خاص باشد.

• برای المنت های صفحه، از تنظیم مقدارهای بزرگ به صورت مطلق در عرض CSS، مانند (div{width:360px;})، پرهیز کنید، چرا که این کار ممکن است باعث شود تا عرض المنت ها برای Viewport دستگاه هایی با صفحه نمایش باریک تر (مانند یک آیفون با عرض 320 پیکسل CSS)، بیش از حد بزرگ باشد. در عوض، بهتر است از مقادیر عرض نسبی، مانند width:100%، استفاده کنید. به طور مشابه، از مقادیر بزرگ برای تعیین موقعیت به صورت مطلق استفاده نکنید، زیرا ممکن است باعث شود تا المنت ها بر روی صفحات نمایش کوچک، خارج از Viewport قرار گیرند.
• در صورت لزوم، به منظور بکارگیری استایل های مختلف برای صفحات نمایش کوچک و بزرگ، می توانید از CSS media queries، استفاده کنید. Web Fundamentals article، توصیه های بیشتری در مورد چگونگی انجام این کار ارائه می دهد.
• مقاله موجود در this article، بررسی اجمالی مناسبی در ارتباط با تصاویر ارائه می دهد که در آن بیان می شود چگونه از تصاویر واکنش گرا بدون تحمیل reflow در صفحه غیر ضروری، هنگام بارگذاری استفاده کنیم.

تعیین محل قرار گیری دقیق هر یک از المنت ها در صفحه نمایش، لی اوت یا  reflow نامیده می شود. در این مرحله، مرورگر از شاخه اصلی شروع کرده و موقعیت هر المنت را با استفاده ازCSS های اعمال شده، تشخیص می دهد. در واقع مختصات نمایش هر المنت در این مرحله مشخص می شود.