تهيئة إطار العرض

يتم تشغيل هذه القاعدة عندما يكتشف PageSpeed Insights أن صفحتك لا تحدد إطار عرض أو تحدد إطار عرض لا يتوافق مع الأجهزة المختلفة.

نظرة عامة

يتحكم إطار العرض في كيفية عرض صفحة الويب على جهاز الجوَّال. وبدون إطار العرض، ستعرض أجهزة الجوّال الصفحة وفقًا لعرض شاشة جهاز سطح المكتب العادية، مع ضبطها بحيث تناسب الشاشة. ويساعد تحديد إطار عرض في التحكم بعرض الصفحة، والضبط على الأجهزة المختلفة.

على اليسار: صفحة بدون إطار عرض وصفي.
على اليمين: صفحة بإطار عرض يتناسب مع عرض الجهاز.

التوصيات

يجب أن تتضمن الصفحات المحسَّنة للظهور جيدًا على أجهزة الجوّال إطار عرض وصفيًا في رأس المستند يحدد width=device-width, initial-scale=1.

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

مزيد من المعلومات

المصطلحات:

  • وحدة بكسل الجهاز: وحدة البكسل الملموسة على الشاشة. على سبيل المثال، يتضمن جهاز iPhone 5 شاشة تتمتع بوحدات بكسل جهاز أفقية يبلغ عددها 640 بكسل.
  • وحدة بكسل منفصلة عن الجهاز (dip): ضبط وحدات بكسل للجهاز بحيث تتوافق مع بكسل مرجعي موحد على مسافة عرض عادية يجب أن تكون بحجم واحد تقريبًا على جميع الأجهزة. على سبيل المثال، يبلغ عرض جهاز iPhone 5 عدد 320 وحدة بكسل منفصلة عن الجهاز.
  • بكسل CSS: الوحدة المستخدمة مع تنسيق الصفحة الذي يتحكم فيه إطار العرض. ويتم تحديد أبعاد بكسل في أنماط مثل width: 100px بوحدات بكسل CSS. وتعد نسبة وحدات بكسل CSS إلى وحدات بكسل المنفصلة عن الجهاز هي عامل ضبط الصفحة، أو التكبير/التصغير.

صفحات أجهزة سطح المكتب على أجهزة الجوّال

عندما لا تحدد الصفحة إطار عرض، ستعرض متصفحات الجوّال هذه الصفحة بقيمة عرض متعددة الخيارات تتراوح ما بين 800 و1024 وحدة بكسل CSS. ويتم تعديل معامل ضبط حجم الصفحة بحيث تتلائم الصفحة مع الشاشة، مما يدفع المستخدمون إلى التكبير/التصغير حتى يصبح بإمكانهم التفاعل مع الصفحة.

علامة إطار العرض الوصفية

توفر علامة إطار العرض الوصفية إرشادات للمتصفح حول كيفية التحكم في أبعاد الصفحة وضبطها، ويجب تضمينها في رأس المستند.

إطار العرض بقيمة عرض ثابتة

يمكن تعيين إطار العرض على قيمة عرض محددة، مثل width=320 أو width=1024. وعلى الرغم من أنه حل لا يوصى به، يساعد هذا البديل المؤقت في ضمان الحصول على صفحات بعرض أبعاد ثابت كما هو متوقع.

إطار العرض سريع الاستجابة

يؤدي استخدام قيمة إطار العرض الوصفي width=device-width إلى توجيه الصفحة لمطابقة عرض الشاشة في وحدات بكسل المنفصلة عن الجهاز. ويتيح هذا للصفحة إعادة عرض المحتوى بحيث يتلائم مع الأحجام المختلفة للشاشات.

وتساعد بعض المتصفحات، من بينها متصفحات iOS وWindows Phone في تثبيت عرض الصفحة عند التدوير إلى وضع أفقي، ويتم التكبير/التصغير بدلاً من إعادة التدفق لملء الشاشة. تؤدي إضافة السمة initial-scale=1 إلى توجيه المتصفحات لإنشاء علاقة من طرف لطرف بين وحدات بكسل CSS ووحدات بكسل المنفصلة عن الجهاز بغض النظر عن اتجاه الجهاز، كما تتيح للصفحة الاستفادة من العرض الأفقي الكامل.

على
اليسار: جهاز iPhone 5 ينفِّذ تدوير width=device-width، ويؤدي إلى عرض المحتويات أفقيًا بقيمة تبلغ 320 بكسل.
على اليمين: جهاز iPhone 5 ينفِّذ تدوير width=device-width, initial-scale=1، ويؤدي إلى عرض المحتويات أفقيًا بقيمة تبلغ 568 بكسل.

يجب تصميم الصفحات بحيث تناسب العديد من قيم العرض المختلفة للاستخدام في إطار عرض سريع الاستجابة. يمكنك الاطلاع على توصياتنا حول تعيين حجم المحتوى على إطار العرض للجهاز.

اعتبارات أخرى

تجنب استخدام minimum-scale، وmaximum-scale، وuser-scalable

من الممكن تعيين الحد الأدنى والأقصى للتصغير/التكبير، أو عدم تمكين المستخدم من تكبير/تصغير إطار العرض بالكامل. وتؤثر هذه الخيارات تأثيرًا سلبيًا في إمكانية الوصول ولذلك يجب تجنبها بشكل عام.

@viewport

لا تعد علامة إطار العرض الوصفية جزءًا من معيار رسمي، على الرغم من أنها معتمدة على نطاق واسع. يتم تضمين هذا السلوك في CSS باعتباره جزءًا من مواصفات تهيئة جهاز CSS. وحتى يتم الانتهاء من هذه المواصفات وتطبيقها على نطاق واسع، يجب أن يتابع المؤلفون استخدام علامة إطار العرض الوصفي للحصول على توافق، سواء بشكل فردي أو باستخدام أنماط @viewport مناسبة.

الموارد: