فحص التكيف. كيف تختبر التصميم سريع الاستجابة؟ لم يتم تعيين قيمة العلامة الوصفية لإطار العرض

تحيات! حان الوقت الآن للتحدث عن استجابة الموقع. كما تعلم على الأرجح ، هذه معلمة مهمة جدًا. يتزايد عدد مستخدمي الأجهزة اللوحية والهواتف الذكية كل يوم. تتلقى مدونتي 30٪ من حركة المرور من الأجهزة المحمولة. عندما زادت النسبة المئوية لحركة مرور الهاتف المحمول ، بدأت أفكر في التخطيط التكيفي ، وهو ما أنصحك بفعله أيضًا. ماذا ستعطيك؟ سيؤدي هذا إلى زيادة ولاء كل من روبوتات البحث وزوار المدونة.

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

سوف نتحقق من مدى استجابة وعالية الجودة لتصميم موقع الويب الخاص بك باستخدام الوظائف المدمجة للمتصفحات ، بالإضافة إلى العديد من الخدمات عبر الإنترنت. حسنًا ، لنبدأ؟ لنبدأ بالخدمات عبر الإنترنت أولاً.

7 خدمات للتحقق من استجابة الموقع عبر الإنترنت

1. الخدمة عبر الإنترنت ami.responsivedesign.is

لقد وصلت إلى الصفحة الرئيسية للخدمة.

قم بالتمرير إلى أسفل واكتب عنوان مدونتك في حقل الإدخال. انقر فوق الزر "انتقال".

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

الأجهزة اللوحية والهواتف المحمولة لها أحجام شاشة مختلفة ، وبالتالي درجات دقة مختلفة. لذلك لن تنتظر تحليلا كاملا من هذه الخدمة)).

2. deviceponsive.com الخدمة عبر الإنترنت

كل شيء هنا هو نفسه كما في الخدمة السابقة. الصق عنوان الموقع في حقل الإدخال وانقر على "انتقال".

الآن نحن بحاجة إلى النزول إلى الأسفل قليلاً حيث سنرى أول جهاز "MacBook" بدقة 1280 × 800 بكسل.

يمكنك التمرير لأسفل الصفحة والنقر فوق العناصر المطلوبة والتحقق من الاستجابة. إذا قمت بالتمرير لأسفل ، فسترى كيف يبدو مشروعك على الأجهزة الأخرى التي تتراوح من 1280 × 800 إلى 320 × 240 بكسل. ستظهر لك هذه الخدمة الصورة الكاملة بخلاف السابقة.

3. الخدمة عبر الإنترنت responsinator.com

في الزاوية اليسرى العليا ، أدخل اسم المورد الخاص بك في النافذة ، وانقر على "انتقال". سيتعين عليك الانتظار قليلاً حتى يتم تحميل الصفحة ، ويمكنك رؤية النتيجة.

يتم هنا توقيع عرض كل شاشة من الأجهزة ، ويوجد الكثير منها هنا.

4. خدمة الإنترنت quirktools.com

خدمة أخرى يمكنك من خلالها التحقق من استجابة الموقع عبر الإنترنت. أدخل اسم الموقع في الحقل وانقر على "انتقال".

ما يعجبني هنا هو أن الخدمة يمكنها إظهار القدرة على التكيف حتى التلفزيون)).

5. خدمة عبر الإنترنت symby.ru

نتبع الخطوات التي تعرفها ونستمتع بالنتيجة.

6. استجابة الخدمة عبر الإنترنت

مشروع رائع لاختبار استجابة الموقع. هناك العديد من درجات دقة الشاشة للهواتف وكذلك الأجهزة اللوحية.

7. خدمة الإنترنت mattkersley.com

أبسط خدمة للتحقق من موقع ويب للتصميم سريع الاستجابة. تتوفر هنا جميع قرارات الأجهزة المحمولة المعروفة تقريبًا.

تحقق من الموقع للاستجابة للأجهزة المحمولة باستخدام متصفح Mozilla

يتمتع متصفح Mozilla Firefox الشهير بوظائف غنية. باستخدام هذا من أدوات Mozila ، سوف نتحقق من الموقع للاستجابة. نقوم بتنفيذ الخطوات التالية: اذهب إلى "القائمة" - "التطوير" - "التصميم التكيفي". يمكن القيام بهذه الإجراءات باستخدام لوحة المفاتيح بالضغط على عدة مفاتيح ++ [M] في نفس الوقت.

بعد الخطوات التي تم اتخاذها ، سترى ما يلي.

من خلال تغيير الدقة ، يمكنك مشاهدة كيفية عرض مشروعك لجمهور الهاتف المحمول.

فحص استجابة موقع Google

بمساعدة Google Chrome العملاق ، يمكنك أيضًا اختبار مدى استجابة مشروعك. نقوم بما يلي: الذهاب إلى "القائمة" ، ثم إلى العنصر "أدوات إضافية" ، و "أدوات المطور ()".

التحقق من الموقع للاستجابة Yandex

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

استنتاج

في رأيي ، سيكون من الأسهل استخدام وظائف متصفحي Google و Mozilla في تصميم موقع الويب الخاص بك يوميًا. حسنًا ، لتهدئة روحك ، استخدم الخدمات عبر الإنترنت للتحقق من قدرة الموقع على التكيف. تحقق من مشروعك للتكيف ، وقم بإجراء التغييرات ، وإصلاح الأخطاء. حسنًا ، هذا كل شيء بالنسبة لي. وداعا للجميع!

مع أطيب التحيات ، فياتشيسلاف كوبتياكوف!

اليوم لم تعد هناك حاجة لإقناع أي شخص بالحاجة إلى نسخة محمولة من الموقع. بعد كل شيء ، كل يوم هناك المزيد والمزيد من الزوار من الهواتف الذكية والأجهزة اللوحية. في وقت كتابة هذا التقرير ، كان حوالي 20٪ من زوار مدونتي يستخدمون الأجهزة المحمولة للتصفح. أي أن كل خامس يأتي إلى موقعي من هاتف أو جهاز لوحي.

قبل عدة سنوات لم أفكر حتى في مثل هؤلاء الزوار ، ولكن عندما تجاوز عددهم 10٪ من العدد الإجمالي ، بدأت في استخدام تنسيق سريع الاستجابة. أتاح ذلك إمكانية عرض المحتوى بشكل صحيح على الأجهزة المحمولة وزيادة ولاء كل من الزوار ومحركات البحث للموقع.

النسخة المحمولة من الموقع والتصميم سريع الاستجابة ليسا نفس الشيء. ستركز هذه المقالة على اختبار التخطيط سريع الاستجابة عندما يتغير تصميم الموقع اعتمادًا على دقة شاشة جهاز الزائر.

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

فحص سريع للتخطيط سريع الاستجابة

متصفح الإنترنت الشهير (متصفح) Mozilla ثعلب النارمزود بأدوات مدمجة للتحقق من تصميم موقع الويب للتأكد من ملاءمته للعرض على الأجهزة المحمولة. لاستخدامه ، انتقل إلى "القائمة" - "التطوير" - "التصميم سريع الاستجابة". أو فقط اضغط على ثلاثة مفاتيح على لوحة المفاتيح في نفس الوقت ++ [م]

يجب أن ترى شيئًا مشابهًا لما يلي:

من خلال تغيير دقة الشاشة واتجاهها ، يمكنك التحقق من كيفية عرض موقعك على الجوال للزوار.

متصفح جوجل كروميحتوي أيضًا على دعم مدمج للتحقق من استجابة تصميم الموقع. للقيام بذلك ، انتقل إلى القائمة ، وحدد عنصر "أدوات إضافية" ثم "أدوات المطور" (أو اضغط على المفتاح ).

بعد ذلك ، انقر فوق رمز التصميم سريع الاستجابة (أو انقر في نفس الوقت على لوحة المفاتيح ++ [م]):

في منتصف الشاشة ، سترى كيف سيتم عرض موقعك على شاشات الأجهزة المحمولة:

اختبار تصميم الجوال SEO

كما تعلم ، فإن قائدي البحث العالميين Google و Yandex لديهما رأي غير متواضع حول الكيفية التي يجب أن يظهر بها الموقع على شاشات الأجهزة المحمولة. وإذا تم التعرف على الموقع على أنه غير ملائم لزوار الجوال ، فإنه ينخفض ​​في نتائج البحث. لذلك ، من وجهة نظر مُحسّنات محرّكات البحث ، إذا كنت لا تريد أن تفقد زوار الهاتف المحمول ، فلا يجب أن يكون لديك تصميم سريع الاستجابة فحسب ، بل يجب أيضًا على محركات البحث اعتباره مناسبًا للأجهزة المحمولة.

للتحقق من القدرة على التكيف باستخدام خدمة Google ، انتقل إلى العنوان التالي واكتب اسم موقعك: https://www.google.com/webmasters/tools/mobile-fri friendly/.

هذا ما تبدو عليه نتيجة التحقق من مدونتي:

مع Yandex ، الأمر أكثر تعقيدًا بعض الشيء ، للتحقق من الضروري التسجيل في خدمة Yandex.Webmaster واستخدام الإصدار التجريبي من الواجهة:

الخدمات عبر الإنترنت لاختبار القدرة على التكيف

تتمثل المهمة الرئيسية لهذه الخدمات في تقديم (إظهار) كيف سيبدو موقعك على جهاز محمول. هناك عدد كبير من المواقع بهذه الوظيفة. سأعطي القليل منهم فقط. في معظم الحالات ، يقومون بتكرار الوظائف المضمنة في FireFox و Chrome.

جوجل ريسيزر

سأبدأ مرة أخرى مع Google ، التي لديها خدمة العرض التوضيحي سريعة الاستجابة الخاصة بها: http://design.google.com/resizer/#

سكرينفلاي Quirktools

الخدمة الثانية الجميلة هي http://quirktools.com/screenfly/. سيُظهر لك كيف قد يبدو موقعك حتى على التلفزيون!

تكيف Symby.ru

حسنًا ، من أجل عدم الإساءة إلى "الشركة المصنعة المحلية" ، سأقدم مثالاً على موقع آخر: http://symby.ru/adaptest/. في صفحة واحدة ، سترى عدة طرق عرض في وقت واحد بدقة شاشة مختلفة.

سرعة النسخة المحمولة للموقع

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

PageSpeed ​​Insights

Google ، كما هو الحال دائمًا ، يتقدم على البقية: https://developers.google.com/speed/pagespeed/insights/. ستوضح لك هذه الخدمة كيف يبدو الموقع على شاشة الهاتف وتقدم توصيات حول كيفية تحسين الكود لزيادة سرعة التحميل على الأجهزة المحمولة.

WebPageTest

وفي الختام ، سأقدم مثالاً على خدمة لن تظهر فقط كيف يبدو الموقع على جهاز محمول ، بل ستظهر أيضًا سرعة عمله: http://www.webpagetest.org/

الاستنتاجات

في رأيي ، في العمل اليومي ، عند إجراء تغييرات على تصميم الموقع ، من الأسهل استخدام الإمكانات المضمنة في متصفحي FireFox و Chrome. بعد ذلك ، بالطبع ، تحتاج إلى التحقق من ولاء محركات البحث لتصميمك. وعندها فقط ، لتهدئة الروح أو للتباهي ، يمكنك استخدام الخدمات عبر الإنترنت.

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

XRespond

تدعم هذه الأداة مجموعة كبيرة من الأجهزة التي يمكن عرضها بالتمرير إلى جانب الموقع. نوصي بوضع إشارة مرجعية على XRespond.

المسؤول

تتيح لك خدمة المستجيب التحقق من عرض الموقع في الاتجاه الأفقي والعمودي على الهواتف الذكية iPhone و Nexus و iPad. هناك أيضًا إمكانية التبديل بين HTTP و HTTPS.

مدقق تصميم مستجيب

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

مات كيرسلي

أطلق المصمم والمطور الإنجليزي Matt Kersley خدمته الخاصة على موقعه على الإنترنت ، حيث يمكنك التحقق من استجابة الموقع ، حيث يكون العرض الافتراضي 240 بكسل. قرر Kersley عدم إضافة أحجام إضافية واقتصر على خمسة: 240 بكسل ، 320 بكسل ، 480 بكسل ، 768 بكسل ، 1024 بكسل.

قام المصمم بنشر كود الأداة على github لأولئك الذين يرغبون في تثبيته على موقعهم.

هل أنا مستجيب؟

هل أنا مستجيب؟ - اختيار ممتاز إذا كنت بحاجة إلى التحقق سريعًا من استجابة الموقع على أجهزة متعددة وإثبات ذلك للعميل على لقطة شاشة.

اختبار التوافق مع الأجهزة الجوّالة

لدى Google العديد من خدمات مساعدة مشرفي المواقع و Mobile-Friendly Test أحدها. يختلف اختبار التوافق مع الأجهزة المحمولة عن باقي خدمات الويب المدرجة في قائمتنا - ولا يمكن استخدامه لعرض عرض الموقع على أجهزة مختلفة. وتتمثل مهمتها في التحقق من تحسين الموقع على الأجهزة المحمولة ، مع تقديم المشورة حول كيفية إصلاح المشكلات. ليس هناك شك في قيمة نصيحة Google.

"مدير مشروع فريق" Business-Motor "، مشرف الموقع ، مؤلف الإعلانات.
يعد التكيف مع الأجهزة المحمولة مرحلة مهمة في العمل مع موقع ويب. مع إدخال عامل الترتيب المتنقل ، أصبح التكيف أكثر أهمية. نخبرك بكيفية إجراء اختبار أساسي للتنقل في الموقع "

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

تأثير هذا العامل على موقع موقع جوجل المعلن رسميًا في 21 أبريل 2015. في الآونة الأخيرة ، ظهرت معلومات حول مدونة Yandex. تم تسمية الخوارزمية ، التي تأخذ في الاعتبار سهولة عرض الموقع على الأجهزة المحمولة ، باسم "فلاديفوستوك" ، ووفقًا لممثلي Yandex ، يتم تنفيذها بالفعل بنشاط في روسيا.

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

هل الموقع مناسب للجوّال؟

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

• على هاتف ذكي ذو اتجاه عمودي للشاشة (بما في ذلك على الشاشات الضيقة بعرض 300 بكسل تقريبًا) ؛
• على هاتف ذكي ذو اتجاه شاشة أفقي (من 480 بكسل) ؛
• على الأجهزة اللوحية ذات اتجاه الشاشة الرأسي والأفقي (من 768 بكسل عرضًا).

من الطبيعي تمامًا ألا تكون تجربة موقع على أجهزة مختلفة أمرًا مزعجًا دائمًا. فقط لأنه قد لا يكون لديك كل الأدوات اللازمة في متناول اليد. يمكنك حل هذه المشكلة باستخدام مختلف برامج محاكاة شاشات الهاتف المحمول. ومع ذلك ، ليس من الضروري الاتصال بخدمة جهة خارجية: مثل هذا المحاكي مثبت مسبقًا في Google Chrome. من أجل استخدامه ، ما عليك سوى فتح موقع الاهتمام ، والضغط على F12 (الاتصال بوحدة تحكم المطور) والنقر فوق الرمز الذي يحتوي على صورة الهاتف المحمول:

من المهم للغاية مراعاة خصائص متصفحات الهاتف المحمول ، لأنه يمكن أن يكون لها أيضًا خصائصها الخاصة. عند الاختبار ، من المهم عرض الموقع من أجل:

• متصفح مثبت مسبقًا لنظام التشغيل Android ؛
• جوجل كروم موبايل.
• المتصفحات "السريعة" - على سبيل المثال ، Opera Mini أو UC Browser ؛
• Safari (على سبيل المثال ، على iPhone).

كيف ترى محركات البحث في الموقع؟

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

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

يرجى ملاحظة: قد لا تتطابق لقطة شاشة الموقع على شاشة الهاتف المحمول في نتائج المسح مع الطريقة التي تراها على هاتفك الذكي. غالبًا ما يرجع ذلك إلى حقيقة أن الملفات المفهرسة بواسطة محرك البحث فقط هي التي تشارك في اختبار التوافق مع الأجهزة المحمولة ، وغالبًا ما يتم إغلاق ملفات النمط (css) والبرامج النصية (js) للفهرسة على مستوى ملف robots.txt. بالمناسبة ، وفقًا لأحدث توصيات Google ، يجب أن تكون مرئية لمحركات البحث.

تحسين مواقع الويب للأجهزة المحمولة في مكتب مشرف الموقع Google و Yandex

من المهم ملاحظة أنه يمكن الحصول على معلومات حول كيفية توافق الموقع مع آراء محركات البحث حول سهولة العرض على الأجهزة المحمولة من مكاتب مشرفي المواقع - جوجل Search Consoleو Yandex.Webmaster (حتى الآن فقط في الإصدار التجريبي من الحساب الجديد).

في Google Search Console ، تتوفر نتائج فحص الصفحة الحالية هنا: Search Traffic => Mobile Usability. تكرر هذه الصفحة المعلومات التي يمكننا الحصول عليها باستخدام اختبار التوافق مع الأجهزة المحمولة ، ولكن يتم توفيرها لجميع الصفحات المفهرسة في الموقع حيث يتم الزحف إليها بواسطة روبوتات Google:

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

ملاحظة.

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

في المقالة التالية من هذه السلسلة ، سنخبرك في غضون أسبوع بكيفية رؤية الموقع من خلال عيون زواره ، وكيفية العثور على "الاختناقات" في شاشة الهاتف المحمول ، وما هي المعايير التي يجب استخدامها لتقييم مدى ملاءمته.

الاستنتاجات

تلعب راحة تصفح الأجهزة المحمولة دورًا بارزًا بشكل متزايد في كل من التحويلات وتصنيفات محرك البحث.

تتمثل الخطوة الأولى لتقييم استجابة الموقع في الاختبار على شاشات مختلفة ومتصفحات هواتف محمولة مختلفة.

سيساعد الاختبار المتوافق مع الأجهزة المحمولة من Google ، بالإضافة إلى الوظائف المقابلة في مكاتب مشرف الموقع (Google Search Console ومكتب مشرف الموقع الجديد في Yandex) في معرفة كيفية تقييم محركات البحث لراحة عرض موقع على الأجهزة المحمولة.

في العديد من البلدان ، تُستخدم الهواتف الذكية بشكل أكثر شيوعًا لتصفح الإنترنت من أجهزة الكمبيوتر. لذلك ، من المهم جدًا تكييف الموقع مع الأجهزة المحمولة. اكتشف ما إذا كانت صفحاتك مناسبة لمستخدمي الهواتف الذكية باستخدام أداة خاصة في Search Console.

إستعمال

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

بناءً على نتائج الفحص ، سترى كيف تبدو الصفحة على الهاتف الذكي وتكتشف المشكلات التي قد تنشأ عند مشاهدتها. غالبًا ما تكون هذه طباعة صغيرة (يصعب قراءتها على شاشة صغيرة) وعناصر فلاش (غير مدعومة في معظم الأجهزة المحمولة).

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

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

يجب أن تحتوي العلامة الوصفية لإطار العرض على قيمة عرض الجهاز

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

المحتوى أعرض من الشاشة

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

خط صغير جدًا

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