Test Your Site on Real iOS Devices with BrowserStack

BrowserStack is a tool that we constantly rely on at OSTraining. It’s an online service that makes it easy to do cross-browser compatibility testing. Whenever we update our site design or test a new feature, we can easily troubleshoot issues in major browsers and on mobile devices.

As developers and designers, we often make the mistake of testing our responsive design on a desktop computer. Resizing the browser can emulate the screen size of mobile device, however it doesn’t provide a truly accurate result.

In this tutorial, I’ll show you how to open your site in a real iOS device with BrowserStack, so you can test your site’s compatibility.

Step #1. Login

• Go to BrowserStack website and sign in.

After login, click “Skip installation” or “Install” depending if you want to add an extension to your browser to access all the BrowserStack features.

Step #2. Test your website with an iOS device

• Click in iOS menu on the left side of the screen.
• Choose a device such as “iPhone 6S Plus” in the Physical devices area.

In the next screen, optionally change the screen size to preview the device and click “Set size”.

At this point, you should be able to preview a real iOS device through your browser.

• Click on the address bar.
• Type the URL of your website, and press the enter key.

Start navigating the website and do the required tests to be sure everything works as expected. Whether you use WordPress, Joomla, Drupal or another platform, Browserstack is a really useful addition to any developer’s toolbox.