رفع ارور Configure the Viewport

رفع ارور Configure the Viewport

فهرست مطالب

پیکربندی Viewport (ناحیه قابل دید کاربران از یک صفحه وب)

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

بررسی اجمالی Configure the Viewport

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

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

Configure the Viewport

Configure the Viewport

 

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

توصیه ها برای Configure the Viewport

در HTML5 روشی معرفی شده است که به طراحان وب اجازه می دهد تا از طریق تگ متا، روی viewport کنترل داشته باشند. شما باید در تمام صفحات وب خود، تگ متای زیر را بکار ببرید تا نمایش صفحات در دستگاه های موبایل به شکل مناسبی صورت پذیرد:

<meta name=viewport content=”width=device-width, initial-scale=1″>

بخش width=device-width، عرض صفحه را بگونه ای تنظیم می کند تا از عرض صفحه نمایش دستگاه پیروی نماید.

بخش initial-scale=1، سطح زوم اولیه را هنگامی که صفحه برای اولین بار توسط مرورگر بارگذاری می شود، تنظیم می کند.

اطلاعات تکمیلی

اصطلاحات:

  • پیکسل سخت افزاری: یک پیکسل فیزیکی تعبیه شده در صفحه نمایش می باشد. به عنوان مثال، آیفون 5 دارای صفحه نمایشی با 640 پیکسل سخت افزاری افقی است.
  • پیکسل مستقل از دستگاه (DIP): مقیاسی برای پیکسل های دستگاه، به منظور مطابقت با یک پیکسل مرجع یکنواخت در فاصله طبیعی بین صفحه نمایش و چشم ها می باشد که تقریبا باید دارای اندازه یکسانی بر روی تمام دستگاه ها باشد. بعنوان مثال، DIP آیفون 5، معادل با 320 است.
  • پیکسل CSS: واحد مورد استفاده برای لی اوت صفحه است که توسط viewport، کنترل می شود. ابعاد پیکسل در استایل هایی مانند width: 100px، در پیکسل های CSS مشخص شده است. نسبت پیکسل های CSS به پیکسل های مستقل از دستگاه، فاکتور مقیاس صفحه یا زوم نامیده می شود.

صفحات دسکتاپ دستگاه های موبایل

هنگامی که یک صفحه، viewport را مشخص نکرده باشد، مرورگرهای موبایل، آن را با عرضی مابین 800 تا 1024 پیکسلCSS ، باز می کنند. ضریب مقیاس صفحه به گونه ای تنظیم شده است که صفحه مورد نظر، متناسب با اندازه صفحه نمایش، نشان داده شود و کاربران را مجبور به انجام زوم، قبل از آنکه بتوانند با صفحه مذکور، تعاملی داشته باشند، می کند.

متا تگ  Viewport

متا تگ Viewport، به مرورگر دستورالعملی در مورد چگونگی کنترل ابعاد صفحه و مقیاس بندی ارائه کرده و می بایست در سرصفحه سند یا هد آن گنجانده شده باشد.

Viewport با عرض ثابت

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

Viewport پاسخگو

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

برخی از مرورگرها، از جمله iOS و ویندوز فون، در هنگام چرخش به حالت افقی، عرض صفحه را ثابت نگاه داشته و به جای تنظیم مجدد به منظور پر کردن صفحه نمایش، زوم می کنند. با افزودن خصیصهinitial-scale=1، مرورگرها یک رابطه  یک به یک بین پیکسل های CSS  و پیکسل های مستقل از دستگاه، صرف نظر از جهت دستگاه (افقی یا عمودی)، برقرار کرده و اجازه می دهد تا صفحه از عرض کامل افقی، بهره مند گردد.

Configure the Viewport

Configure the Viewport

 

 

 

 

 

 

 

 

 

 

———————————————————————————————————————————————————————————————-

Configure the Viewport

Configure the Viewport

 

 

 

 

 

 

 

 

 

 

 

 

—————————————————————————————————————————————————————————————

در قسمت بالای شکل فوق، یک آیفون 5، تنها از بخش width=device-width استفاده کرده و پس از چرخش به حالت افقی، عرض px 320 را برای پنجره داخلی، بکار برده است. در مقابل، قسمت پایین شکل فوق، یک آیفون 5 را نمایش می دهد که از width=device-width, initial-scale=1، استفاده کرده و پس از چرخش به حالت افقی، عرض px 568 را برای پنجره داخلی، بکار برده است.

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

ملاحظات دیگر Configure the Viewport

پرهیز از minimum-scalemaximum-scaleuser-scalable

این امکان برای شما وجود دارد که میزان حداقل و حداکثر زوم را تنظیم کرده و یا توانایی کاربر در زوم Viewport را بطور کامل غیر فعال کنید. اما باید توجه داشته باشید که این اقدامات تاثیری منفی در قابلیت دسترسی داشته و به طور کلی باید از آنها اجتناب شود.

@viewport

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