هل تحتاج إلى الوصول إلى محاكي متصفح الهاتف الذكي على جهاز الكمبيوتر الخاص بك لاختبار إصدار الهاتف المحمول من موقع الويب الذي تهتم به؟ ربما تكون مطور ويب ، أو تريد أن تصبح واحدًا ، وتحتاج إلى محاكاة متصفح الجوال للمشروع الذي تعمل عليه. بغض النظر^(Regardless) عن أسبابك ، إليك كيفية الوصول إلى محاكي متصفح الجوال في Google Chrome و Mozilla Firefox و Microsoft Edge و Opera:

كيفية تشغيل واستخدام محاكي متصفح الجوال في Google Chrome

في Google Chrome ، انتقل إلى موقع الويب الذي تريد عرضه في محاكي متصفح الجوال. بعد ذلك ، إما أن تضغط على مفاتيح CTRL + SHIFT + I على لوحة المفاتيح أو ، باستخدام الماوس ، انقر فوق النقاط الرأسية الثلاث في الزاوية العلوية اليمنى لفتح قائمة "تخصيص والتحكم في Google Chrome"^{(“Customize and control Google Chrome”)} . اختر المزيد من الأدوات ،^{(More tools, )} متبوعة بأدوات المطور^{(Developer Tools)} .

الوصول إلى أدوات المطور^{(Access Developer Tools)} في Google Chrome

انقر أو اضغط على زر "Toggle device toolbar" (يبدو مثل الهاتف الذكي بجوار الكمبيوتر اللوحي) أو اضغط على CTRL + Shift + M على لوحة المفاتيح. يؤدي ذلك إلى تنشيط شريط أدوات الجهاز حيث يتم تحميل صفحة الهاتف المحمول. بشكل افتراضي ، يستخدم شريط أدوات الجهاز نموذجًا متجاوبًا^(Responsive) للموقع الذي قمت بتحميله. انقر^(Click) فوقه واختر الجهاز المحمول الذي تريد محاكاته. تتضمن خياراتك العديد من أجهزة iPhone و iPad و Surface Duo وجهازي Samsung Galaxy وجهاز محاكاة متصفح Moto G4^{(Moto G4 mobile)} للكمبيوتر الشخصي.

كيفية تمكين محاكي متصفح الجوال في جوجل كروم^{(Google Chrome)}

نصيحة:^(TIP:) لسوء الحظ ، لا يمكنك استخدام اختصار لوحة المفاتيح CTRL + Shift + M

انتقل^(Navigate) إلى الموقع الذي تريد اختباره ، وقم بالتبديل بين الهواتف الذكية والأجهزة اللوحية المختلفة ، وشاهد كيف يبدو. عند الانتهاء ، اضغط على الزر X (إغلاق)^{(X (Close))} في الزاوية العلوية اليمنى من أدوات مطور Google Chrome للعودة إلى وضع تصفح سطح المكتب القياسي.

إغلاق محاكي متصفح الجوال جوجل كروم^{(Google Chrome)}

تلميح:^(TIP:) إذا كنت تستخدم Google Chrome بكثرة ، فقد ترغب أيضًا في معرفة كيفية استخدام خيارات التحكم في الوسائط في Google Chrome^{(how to use Google Chrome’s media control options)} .

كيفية تشغيل واستخدام محاكي متصفح الجوال في Mozilla Firefox

في Mozilla Firefox ، افتح الموقع الذي تريد استخدام محاكي مستعرض الهاتف المحمول من أجله. بعد ذلك ، اضغط على CTRL + Shift + M على لوحة المفاتيح أو انقر على زر برغر في الزاوية العلوية اليمنى لفتح قائمة Firefox ، واختر Web Developer .

قم بالوصول إلى أدوات Web Developer في Firefox

ترى قائمة مليئة بالأدوات المفيدة لمطوري الويب. في القائمة ، حدد "وضع التصميم المتجاوب" ،^{(“Responsive Design Mode,”)} ويتم تحميل هذا الوضع الخاص لعرض صفحة الويب في Firefox .

اختر وضع التصميم المتجاوب^{(Responsive Design Mode)} في Firefox

يتيح Firefox وضع التصميم سريع الاستجابة^{(Responsive Design Mode)} . في الجزء العلوي من النافذة ، ترى المعلمات المستخدمة بواسطة وضع المحاكاة هذا. إذا لم يتم تحديد أي جهاز ، فانقر أو انقر فوق متجاوب^(Responsive) لفتح قائمة منسدلة بالأجهزة المتاحة للمحاكاة ، ثم اختر الجهاز الذي تريد محاكاته.

يمكنك محاكاة متصفح الجوال للعديد من أجهزة iPhone و iPad و Kindle Fire ( Firefox هو المتصفح الوحيد الذي يوفر خيار المحاكاة هذا) وأجهزة Samsung Galaxy S9 .

استخدم محاكي متصفح الجوال في Firefox

عند الانتهاء من الاختبار باستخدام محاكي متصفح الهاتف الذكي ، اضغط على الزر X (إغلاق وضع التصميم المتجاوب)^{(X (Close Responsive Design Mode))} في الزاوية العلوية اليمنى من Mozilla Firefox .

أغلق محاكي متصفح الجوال في Firefox

لقد عدت إلى وضع تصفح سطح المكتب القياسي.

كيفية تشغيل واستخدام محاكي مستعرض الهاتف المحمول في Microsoft Edge

يستخدم Microsoft Edge^{(Microsoft Edge)} نفس محرك العرض مثل Google Chrome ويقدم نفس محاكيات مستعرض الهاتف الذكي. للوصول إليها ، قم بزيارة موقع الويب الذي تريد اختباره ، واضغط إما على مفاتيح CTRL + SHIFT + I على لوحة المفاتيح أو انقر فوق النقاط الأفقية الثلاث ( "الإعدادات والمزيد"^{(“Settings and more”)} ) في الزاوية العلوية اليمنى من Microsoft Edge . في القائمة التي تظهر ، انتقل إلى المزيد من الأدوات^{(More tools)} ثم إلى أدوات المطور^{(Developer Tools)} .

قم بالوصول إلى أدوات المطور في ^(Developer)Microsoft Edge

انقر فوق الزر "Toggle device emulation" (يشبه الهاتف الذكي بجوار الكمبيوتر اللوحي) أو اضغط على CTRL + Shift + M على لوحة المفاتيح. يؤدي هذا إلى تنشيط شريط أدوات محاكي متصفح الجوال. بشكل افتراضي ، يستخدم نموذجًا متجاوبًا^(Responsive) للموقع الذي قمت بتحميله. انقر^(Click) فوقه واختر الجهاز المحمول الذي تريد محاكاته. تتضمن خياراتك نفس الهواتف الذكية والأجهزة اللوحية مثل Google Chrome .

قم بالوصول إلى محاكي متصفح الجوال في Microsoft Edge

تصفح الموقع الذي تريد اختباره ، وتغيير بين الأجهزة المحمولة المختلفة ، وشاهد كيف يبدو. عند الانتهاء ، اضغط على الزر X (إغلاق)^{(X (Close))} في الزاوية العلوية اليمنى من Microsoft Edge.

أغلق محاكي متصفح الجوال في Microsoft Edge

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

كيفية تشغيل واستخدام محاكي متصفح الجوال في Opera

في Opera ، قم بزيارة صفحة الويب التي تريد عرضها كما لو كنت تستخدم جهازًا محمولاً. ثم انقر فوق أيقونة Opera في الجزء العلوي الأيسر ( "تخصيص والتحكم في Opera"^{(“Customize and control Opera”)} ). في القائمة التي تفتح ، اختر Developer متبوعًا بأدوات Developer^{(Developer tools)} . إذا كنت تفضل لوحة المفاتيح ، فاضغط على مفاتيح CTRL+Shift+I لنفس النتيجة.

قم بالوصول إلى أدوات المطور في Opera

يتم عرض أدوات المطور^{( Developer tools)} على الجانب الأيمن من نافذة المتصفح. انقر فوق الزر "شريط أدوات تبديل الجهاز"^{(“Toggle device toolbar”)} (يبدو مثل الهاتف الذكي بجوار الكمبيوتر اللوحي) أو اضغط على CTRL + Shift + M على لوحة المفاتيح. يظهر شريط أدوات الجهاز على اليسار. بشكل افتراضي ، يستخدم نموذجًا متجاوبًا^(Responsive) للموقع الذي قمت بتحميله. انقر^(Click) فوقه واختر الجهاز المحمول الذي تريد محاكاته من قائمة الخيارات. يقدم Opera نفس محاكيات مستعرض الهاتف المحمول مثل Google Chrome و Microsoft Edge ، لأنه يعتمد على نفس محرك العرض ( Chromium ).

قم بالوصول إلى محاكي متصفح الجوال في Opera

عند الانتهاء من الاختبار ، اضغط على الزر X ( إغلاق^(Close) ) في الزاوية العلوية اليمنى للعودة إلى وضع تصفح سطح المكتب القياسي.

أغلق محاكي متصفح الجوال في Opera

هل^(Are) أنت سعيد بخيارات محاكاة متصفح الجوال المتاحة؟

أنت الآن تعرف كيفية محاكاة جميع أنواع الأجهزة المحمولة في متصفح الويب المفضل لديك. ومع ذلك ، قد تلاحظ أن معظم متصفحات الويب تقدم نفس خيارات المحاكاة التي تفضل أجهزة iPhone و iPad. إذا كنت ترغب في محاكاة هاتف ذكي أو جهاز لوحي يعمل بنظام Android^(Android) ، فإن فرصك ضئيلة للغاية ، حتى في Google Chrome - المتصفح الذي طورته الشركة وراء Android . إذا كنت تريد أفضل النتائج ، فقد تحتاج إلى استخدام مستعرضين لهذه المهمة: Chrome و Firefox ، أو Firefox و Edge أو Opera . قبل أن تذهب ، أخبرنا برأيك في الخيارات المتاحة.

How to use the mobile browser emulator in Chrome, Firefox, Edge, and Opera -

Do yоu need to access a smartphone browser emulаtor on your PC to test the mobile version of a website you are interested іn? Maybe you are a wеb developer, or you want to become one, and you need to ѕimulate a mobile browser for the project you are working on. Regardless of your reasons, here is how to access a mobile browser emulator in Google Chrome, Mozilla Firefox, Microsoft Edge, and Opera:

How to turn on and use the mobile browser emulator in Google Chrome

In Google Chrome, navigate to the website that you want to view in the mobile browser emulator. Then, either press the CTRL + SHIFT + I keys on your keyboard or, with the mouse, click the three vertical dots in the top-right corner to open the “Customize and control Google Chrome” menu. Choose More tools, followed by Developer Tools.

Access Developer Tools in Google Chrome

Click or tap on the “Toggle device toolbar” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. This activates the device toolbar where the mobile page is loaded. By default, the device toolbar uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate. Your options include many iPhones, iPads, Surface Duo, two Samsung Galaxy devices, and a Moto G4 mobile browser simulator for PC.

How to enable the mobile browser emulator in Google Chrome

TIP: Unfortunately, you can use the CTRL + Shift + M keyboard shortcut only after enabling the developer tools.

Navigate the site you want to test, switch between the different smartphones and tablets, and see how it looks. When you are done, press the X (Close) button in the top-right corner of Google Chrome’s developer tools to get back to the standard desktop browsing mode.

Closing the mobile browser emulator Google Chrome

TIP: If you are a heavy Google Chrome user, you may also want to learn how to use Google Chrome’s media control options.

How to turn on and use the mobile browser emulator in Mozilla Firefox

In Mozilla Firefox, open the site for which you want to use a mobile browser simulator. Then, either press CTRL + Shift + M on your keyboard or click the burger button on the top-right corner to open Firefox’s menu, and choose Web Developer.

Access the Web Developer tools in Firefox

You see a menu filled with tools that are useful to web developers. In the list, select “Responsive Design Mode,” and this particular mode of viewing a web page is loaded in Firefox.

Choose the Responsive Design Mode in Firefox

Firefox enables the Responsive Design Mode. At the top of the window, you see the parameters used by this emulation mode. If no device is selected, click or tap on Responsive to open a drop-down list with devices available for emulation, and then choose the one that you want to simulate.

You can simulate the mobile browser for many iPhones, the iPad, the Kindle Fire (Firefox is the only browser to offer this emulation option), and Samsung Galaxy S9 devices.

Use the mobile browser emulator in Firefox

When you’re done testing with the smartphone browser emulator, press the X (Close Responsive Design Mode) button on the top-right corner of Mozilla Firefox.

Close the mobile browser emulator in Firefox

You are back to the standard desktop browsing mode.

How to turn on and use the mobile browser emulator in Microsoft Edge

Microsoft Edge uses the same rendering engine as Google Chrome and offers the same smartphone browser emulators. To access them, visit the website that you want to test, and either press the CTRL + SHIFT + I keys on your keyboard or click the three horizontal dots (“Settings and more”) in the top-right corner of Microsoft Edge. In the menu that appears, go to More tools and then to Developer Tools.

Access the Developer tools in Microsoft Edge

Click the “Toggle device emulation” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. This activates the mobile browser emulator toolbar. By default, it uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate. Your options include the same smartphones and tablets as Google Chrome.

Access the mobile browser emulator in Microsoft Edge

Browse the site you want to test, change between the different mobile devices, and see how it looks. When you are done, press the X (Close) button in Microsoft Edge’s top-right corner.

Close the mobile browser emulator in Microsoft Edge

You are now back to the standard desktop browsing mode.

How to turn on and use the mobile browser emulator in Opera

In Opera, visit the web page that you want to view as if you were using a mobile device. Then click the Opera icon on the top-left (“Customize and control Opera”). In the menu that opens, choose Developer followed by Developer tools. If you prefer the keyboard, press the CTRL+Shift+I keys for the same result.

Access the Developer tools in Opera

The Developer tools are displayed on the right side of the browser window. Click the “Toggle device toolbar” button (it looks like a smartphone next to a tablet) or press CTRL + Shift + M on your keyboard. The device toolbar is shown on the left. By default, it uses a Responsive template for the site you loaded. Click on it and choose the mobile device that you want to emulate from the list of options. Opera offers the same mobile browser emulators as Google Chrome and Microsoft Edge, as it is based on the same rendering engine (Chromium).

Access the mobile browser emulator in Opera

When you are done testing, press the X (Close) button in the top-right corner to get back to the standard desktop browsing mode.

Close the mobile browser emulator in Opera

Are you happy with the mobile browser emulation options available?

Now you know how to emulate all kinds of mobile devices in your favorite web browser. However, you might notice that most web browsers offer the same emulation options that favor iPhones and iPads. If you want to emulate a modern Android smartphone or tablet, your chances are pretty slim, even in Google Chrome - the browser developed by the company behind Android. If you want the best results, you might need to use two browsers for this task: Chrome and Firefox, or Firefox and Edge or Opera. Before you go, tell us what you think about the available options.

Related posts

• كيفية كتم علامة تبويب في Chrome و Firefox و Microsoft Edge و Opera

• كيفية طباعة مقالة بدون إعلانات في جميع المتصفحات الرئيسية

• كيفية تحديد موقع الويب إلى شريط المهام أو Start Menu في Windows 10

• كيفية جعل Chrome default browser في Windows 10 (Firefox & Opera)

• كيفية تغيير default browser في Windows 11

• أين يتم تخزين ملفات تعريف الارتباط في Windows 10 لجميع المتصفحات الرئيسية؟

• كيفية مسح ملفات تعريف الارتباط على Android (Chrome و Firefox و Opera و Samsung Internet)

• كيفية تصدير كلمات مرور LastPass الخاصة بك إلى ملف CSV

• كيفية تغيير search engine على Chrome ل Windows، ماوس، Android، و iOS

• كيفية إيقاف Chrome من طلب حفظ كلمات المرور

• كيفية الحصول على، تكوين، وإزالة Microsoft Edge امتدادات

• كيف أقوم بإجراء النص أكبر في Chrome و Edge و Firefox و Opera؟

• كيفية استخدام Microsoft Edge Collections

• 5 مشكلات تجعل Microsoft Edge متصفح ويب أسوأ من غيره

• كيفية تعيين الملقم الوكيل في Chrome، Firefox، Edge، وOpera

• ما هو إصدار Microsoft Edge لدي؟

• كيفية حظر ملفات تعريف الارتباط الجهات الخارجية في Chrome و Firefox و Edge و Opera

• أفضل 10 Microsoft Edge الوظائف الإضافية في 2021

• Chrome 64 بت أو Chrome 32 بت: قم بتنزيل الإصدار الذي تريده لنظام التشغيل Windows 10 أو أقدم

• كيفية التكبير والتصغير في الخاص بك web browser