---
title: "Simulating a Mobile Environment For Testing"
source: "https://docs.nexcess.com/software/kadence/simulate-mobile-environment-for-testing/"
description: "In today's mobile-first environment, it's essential to make sure your website not only looks good but also works properly on mobile-sized screens. In addition t…"
vertical: "Software"
area: "Kadence"
date: "2025-05-29"
last_modified: "2026-07-02"
---

# Simulating a Mobile Environment For Testing

In today’s *mobile-first environment,* it’s essential to make sure your website not only looks good but also **works** **properly** on **mobile-sized screens**. In addition to testing on an actual mobile device, there are several other options available that provide additional options and features.

![Inspector Tools](https://docs.nexcess.com/wp-content/uploads/2026/06/Inspector-Tools-1.gif)Chrome Browser

- **Open Chrome Developer Tools:** • Press F12 or Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (Mac).  
    • Or you can right-click anywhere on the page and choose “*Inspect*”.
- **Toggle Device Toolbar:** • Click the “Toggle device toolbar” icon in the top-left corner of Developer Tools, or press Ctrl + Shift + M (Windows/Linux) or Cmd + Shift + M (Mac).
- **Choose a Mobile Device:** • At the top of the viewport, you’ll see a dropdown labeled something like “Responsive” or the name of a device.   
    • Click it and select a predefined device (e.g., iPhone 14, Pixel 7, etc.)  
    • Chrome will emulate the screen resolution, user agent, and touch events for that device.
- **Adjust Options:**  
    • You can also customize the dimensions, zoom level, and throttle network speed (e.g., simulate 3G).  
    • Use the rotation icon to switch between portrait and landscape.
- **Refresh the Page** (optional):  
    • Sometimes it’s helpful to reload the page (F5 or Cmd + R) to see how scripts and styles behave on mobile.
- **Exit Emulation Mode:** • Click the Toggle device toolbar icon again or press Ctrl + Shift + M (Windows/Linux) or use Cmd + Shift + M (Mac) to return to normal desktop view.

Safari Browser

- **Enable the Develop Menu (if not already enabled):** • Open Safari.  
    • Go to Safari → Settings (or Preferences on older macOS versions).  
    • Click the Advanced tab.  
    • Check the box at the bottom: “**Show Develop menu in menu bar**”
- **Open Responsive Design Mode:** • Open the webpage you want to test.  
    • Go to Develop → **Enter Responsive Design Mode** in the top menu bar or press Ctrl + Cmd + R.
- **Choose a Mobile Device:** • At the top of the page, select a device profile to emulate (iPhone, iPhone Pro, iPad mini, etc.) or drag the resize bars for a custom size.  
    • Click the Rotate the Viewport icon to view to portrait or landscape mode.
- **Refresh the Page** (optional):  
    • Sometimes it’s helpful to reload the page (Cmd + R) to see how scripts and styles behave on mobile.
- **Exit Responsive Design Mode:** • Click the “X” in the top-left corner of the simulation window  
    • or go to Develop > **Exit Responsive Design Mode**

Xcode

To use **Xcode with Safari** to test websites on real iOS devices, you can take advantage of Safari’s Web Inspector and device simulator integration provided by Xcode. Here’s how to set it up and use it:

- **Install Xcode**:  
    • Go to the Apple App Store and install the [Xcode app](https://apps.apple.com/us/app/xcode/id497799835?mt=12) (if not already installed).  
    • Go to Xcode → **Settings** and click the **Components** tab to ensure you have simulators installed.
- **Restart Safari (after initial Xcode installation) and launch a device simulator:** • Navigate to a page to test.  
    • Go to Develop → **Open Page With** and select a device (i.e., iPhone, iPad, etc.)
- **Access the Safari Inspector:** • In Safari, click Develop → **Inspect Apps and Devices**.  
    • Select your simulated device.

Firefox Browser

- **Open Developer Tools:**  
    • Press F12, Press Cmd + Option + I (Mac) / Ctrl + Shift + I (Windows/Linux).  
    • or right-click on the page and choose “*Inspect*”.
- **Enter Responsive Design Mode:** • Click the “Responsive Design Mode” icon (a small phone/tablet) in the DevTools toolbar  
    • Or use the shortcut: Cmd + Option + M (Mac) / Ctrl + Shift + M (Windows/Linux).
- **Choose a Device Profile:** • At the top of the viewport, choose a device (i.e., iPhone SE, Galaxy S20, iPad, etc.)  
    • Or manually set width, height, and device pixel ratio,
- **Simulate Touch and Orientation:** • Use the rotate icon to switch between portrait and landscape.  
    • Click the “Touch simulation” icon (finger tap symbol) to enable touch-like interactions.
- **Exit Responsive Mode:** • Click the “X” to close DevTools or click the phone/tablet icon again.  
    • Or use the shortcut: Cmd + Option + M (Mac) or Ctrl + Shift + M (Windows/Linux).

BrowserStack

BrowserStack is a cloud-based testing platform that lets you test your websites and mobile apps across a wide range of real devices and browsers without needing to own the hardware or set up virtual machines. With this tool, you can:

- Test your website on actual browsers (Chrome, Firefox, Safari, Edge, etc.), including current and older versions.
- Use physical iOS and Android devices hosted on the BrowserStack cloud.
- Interactive manual testing on real devices and browsers.
- Simulate slow networks, change geolocation, switch screen sizes, etc.

Visit [www.browserstack.com](https://www.browserstack.com) for more information and to create an account.