كيفية عرض النسخة المحمولة من موقع على جهاز كمبيوتر

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

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

كيفية عرض إصدار الجوال لموقع ويب في Chrome على جهاز Mac

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

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

1. قم بتشغيل متصفح Google Chrome وانتقل إلى الموقع الذي تريد عرضه.
   
2. اضغط على F12 على لوحة المفاتيح للوصول إلى DevTools.
   
3. عندما يتم تشغيل الوضع ، انقر فوق رمز "تبديل جهاز محاكاة".
   
4. يمكنك الاختيار من بين قائمة أجهزة iOS و Android لمحاكاتها.
   
5. سيعرض موقع الويب في نموذج الهاتف المحمول الذي اخترته.
   

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

كيفية عرض إصدار الجوال لموقع ويب في Chrome على جهاز كمبيوتر يعمل بنظام Windows

إذا كنت ترغب في عرض إصدار محمول من موقع ويب على جهاز كمبيوتر يعمل بنظام Windows في Chrome ، فهذه عملية مشابهة إلى حد كبير:

1. افتح متصفح Chrome.
   
2. في Chrome ، انتقل إلى موقع الويب الذي ترغب في رؤيته في إصدار الهاتف المحمول.
3. انقر بزر الماوس الأيمن فوق صفحة الويب وحدد "فحص" من القائمة.
   
4. للانتقال إلى أدوات المطور ، انقر فوق علامة التبويب "المزيد من الأدوات" وحدد "أدوات المطور" أو اضغط على F12 لفتح DevTools.
   
5. سيتم فتح نافذة أدوات المطور.
6. انقر فوق رمز تبديل الجهاز للتبديل إلى وضع عرض موقع الجوال.
   
7. اختر الجهاز المحمول الذي ترغب في محاكاته (اختياري).
   
8. يمكنك الآن تعديل أبعاد الشاشة لتناسب احتياجاتك.

كيفية عرض إصدار الجوال لموقع ويب في Chrome على جهاز Chromebook

يشبه الوصول إلى إصدار الجوال من موقع ويب في Chrome باستخدام Chromebook إلى حد كبير الطريقتين الأوليين.

1. افتح متصفح الويب Google Chrome.
   
2. افتح صفحة الويب التي تريد الوصول إليها على جهازك المحمول.
   
3. للوصول إلى القائمة ، انقر فوق رمز النقاط الثلاث الرأسية.
   
4. اسحب مؤشر الماوس فوق عنصر "المزيد من الأدوات" في القائمة.
   
5. حدد "أدوات المطور".
   
6. سيتم فتح نافذة أدوات المطور في المتصفح.
   
7. قم بتبديل وضع عرض موقع الجوال عن طريق النقر فوق رمز تبديل الجهاز.
   

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

كيفية عرض نسخة الهاتف المحمول من موقع ويب في Firefox على جهاز Mac

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

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

1. افتح النسخة المحمولة من موقع الويب الذي ترغب في رؤيته.
2. انقر بزر الماوس الأيمن على صفحة الويب وحدد خيار "فحص" من القائمة.
   
3. اختر "وضع التصميم سريع الاستجابة".
   
4. اختر حجم شاشة الموقع.
   

كيفية عرض إصدار الهاتف المحمول لموقع ويب في Firefox على جهاز كمبيوتر يعمل بنظام Windows

تمتلك أجهزة الكمبيوتر التي تعمل بنظام Windows أيضًا خيار عرض إصدارات الأجهزة المحمولة من مواقع الويب التي تستخدم Firefox. إليك كيفية القيام بذلك:

1. ابدأ تشغيل Firefox على جهاز الكمبيوتر الخاص بك.
   
2. انتقل إلى موقع الويب الذي تريد رؤيته كنسخة محمولة.
   
3. انتقل إلى "الإعدادات" من خلال النقر على أيقونة الأشرطة الثلاثة الأفقية.
   
4. سترى قائمة منسدلة حيث سيتعين عليك تحديد خيار "Web Developer".
   
5. حدد "وضع التصميم سريع الاستجابة".
   
6. أخيرًا ، يمكنك تحديد طراز هاتف ذكي لترى كيف سيظهر موقعك على هذا الجهاز.
   

كيفية عرض إصدار الجوال لموقع ويب في Safari على جهاز Mac

لقد غطينا كيفية عرض موقع ويب للجوال على سطح مكتب باستخدام Chrome و Firefox. ولكن ماذا عن المتصفح الافتراضي الذي يأتي مع أجهزة Mac ، Safari؟ لحسن الحظ ، من الممكن عرض نسخة محمولة من موقع ويب في Safari أيضًا.

1. قم بتشغيل متصفح Safari.
   
2. انتقل إلى موقع الويب الذي تريد عرضه كنسخة محمولة.
   
3. انقر فوق "خيارات" ثم على قائمة "تطوير".
   
4. من القائمة المنسدلة ، اختر "الدخول إلى وضع التصميم المتجاوب".
   
5. يمكنك الآن عرض النسخة المحمولة من الموقع.
   

أسئلة وأجوبة إضافية

هل يمكنني عرض إصدار سطح المكتب لموقع ويب على هاتفي؟

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

1. انتقل إلى موقع الويب الذي تريد رؤيته في عرض سطح المكتب.

2. اضغط على أيقونة ثلاثية النقاط للوصول إلى القائمة.

3. حدد خيار "عرض سطح المكتب" الآن.

ضع في اعتبارك أن هذه الخطوات يمكن أن تختلف حسب الهاتف الذي تستخدمه.

جعل تصميم مواقع الويب على الهاتف المحمول أسهل

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

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

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