في أيامنا هذه، تأتي معظم الزيارات إلى المواقع الإلكترونية من الهواتف و الأجهزة اللوحية. لذلك، إذا كنت تمتلك موقع إلكتروني، عليك دائما التأكد من أن موقعك يعمل بشكل جيد على الهواتف و الأجهزة اللوحية.
عوضا عن إستخدام الهاتف الخاص بك مرار و تكرار للتحقق ما إذا كان موقعك يبدو و يعمل بشكل صحيح على الهواتف و الأجهزة اللوحية، هناك طريقة أخرى للقيام بذلك و هي من خلال أداة Device Mode على متصفح جوجل كروم (Google Chrome) أو أي متصفح آخر على جهاز الكمبيوتر الخاص بك.
كيفية التحقق كيف يبدو الموقع الخاص بك على الهاتف من متصفح جوجل كروم (Google Chrome) على الحاسوب
توجه إلى موقعك.
أنقر بزر الفأرة الأيمن على أي مكان فارغ على الموقع، ثمّ إختر "فحص" من القائمة التي تظهر.
سيتمّ فتح أدوات مطوّري البرامج (Developer Tools) في الأسفل أو على اليمين.
يمكنك تغيير مكان فتحه بالنقر على النقاط الثلاث ثمّ أيقونات الإتجاه. ننصحك بتركه على اليمين أو اليسار.
الآن أنقر على أيقونة الأجهزة المحمولة و سيتمّ عرض كيف يبدو الموقع الخاص بك على الهاتف.
في الأعلى، بالنقر على "الأبعاد"، يمكنك إختيار جهاز معيّن لرؤية كيف سيظهر موقعك عليه. على سبيل المثال، يمكنك إختيار iPhone 4، أو Samsung Galaxy، أو iPad Air.
لاحظ أنه ليس عليك تجربة موقعك على كل أنواع الهواتف و الأجهزة اللوحية، فالموقع سيعمل و يظهر بنفس الطريقة على معظم الهواتف و الأجهزة اللوحية سواء كانوا يعملون بنظام تشغيل أندرويد (Android)، آي أو إس (iOS)، أو ويندوز (Windows).
ما عليك فعله سواى إختيار بضعة أجهزة و تجربة موقعك عليهم، على سبيل المثال إختر:
- iPhone 4 لأن حجم شاشته صغير، للتحقق كيف يظهر الموقع على الأجهزة ذات حجم شاشة صغير.
- iPhone 12 للتحقق كيف يبدو الموقع على الهواتف التي تعمل بنظام تشغيل آي أو إس (iOS) .
- Samsung Galaxy S8 للتحقق كيف يبدو الموقع على الهواتف التي تعمل بنظام تشغيل أندرويد (Android).
- iPad Air لرؤية كيف سيظهر الموقع على الأجهزة اللوحية.
إذن كان ذلك كيفية رؤية كيف يبدو الموقع الخاص بك أو أي موقع آخر على الهاتف من متصفح جوجل كروم (Google Chrome) على الحاسوب.
يمكنك إعادة نفس الشيء مع باقي المتصفحات على جهاز الكمبيوتر، سفاري (Safari)، فايرفوكس (Firefox)، مايكروسوفت إيدج (Microsoft Edge)، و أوبرا (Opera). فقط أنقر بزر الفأرة الأيمن على أي مكان فارغ من موقعك، حدد "فحص"، ثمّ أنقر على أيقونة الأجهزة المحمولة.
طريقة أخرى لمعرفة كيف يبدو الموقع الخاص بك على الأجهزة المحمولة: بعد فتح أدوات مطوّري البرامج (Developer Tools)، قم بسحب النافذة إلى اليمين و أو اليسار لتغيير عُرض الموقع.
سيظهر لك العُرض أعلى الشاشة، في الصورة أعلاه باللون الأزرق.
إذا كان العُرض ما بين 320 و 480 فسيظهر الموقع بنفس الطريقة التي تراها على الهواتف.
إذا كان العُرض ما بين481 و 767 فسيظهر الموقع بنفس الطريقة التي تراها على الأجهزة اللوحية عندما يكون وضع المشاهدة عمودي.
إذا كان العُرض ما بين768 و 1024 فسيظهر الموقع بنفس الطريقة التي تراها على الأجهزة اللوحية عندما يكون وضع المشاهدة أفقي.