Debug Your Designs on 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.

When we’re customizing our designs, we use Browserstack to play with the CSS. One key feature is the ability to use developer tools to preview possible design changes.

Step #1. Open your site in a real iOS device

• Read our previous tutorial to know how to preview your site in real iOS devices.

Step #2. Enable developer tools

• To enable the developer tools to debug your site’s CSS, click DEVTOOLS. The developer area will show up in the bottom of your screen.

Step #3. Inspect an element from your site

We want to inspect an element on the website, such as the text, a link, an image, or a video.

In my example, I want to inspect the heading of our homepage.

1. Click on the cursor icon from the developer tools.
2. Click on one element from your site, in order to inspect its HTML as displayed in the red square below.

Step #4. Play with the CSS

On the right side of the developer tools area, you will see the CSS applied to the selected element.

Here I can preview a different result on the design by adding/changing the CSS properties such as font-size, margin, color, etc.

I will increase the values for font-size from 30px to 40px, and line-height from 40px to 50px.

These changes will apply immediately to the preview of your site on BrowserStack. In this example “You can build great websites. We can help.” becomes bigger.

Step #5. Upload your CSS changes into your server

These changes are a preview only, and are not actually applied to the site. We will need to upload the CSS changes inside the proper media query to target the iOS device we are testing.

In this example, I’m testing www.ostraining.com on a iPhone 6S, so, the code I need to upload into my server will look like:

{codecitation css}@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
h1, .uk-h1, .tm-title {
font-size: 40px;
line-height: 50px;
}
}{/codecitation}

To know more about which media queries to use, take a look at this article.