Customize your Site's Design 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.

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

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.

Test CSS Real iOS Devices with BrowserStack

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.

Test CSS Real iOS Devices with BrowserStack

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.

Test CSS Real iOS Devices with BrowserStack

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.

Test CSS Real iOS Devices with BrowserStack

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.

Test CSS Real iOS Devices with BrowserStack

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:

@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;
      }
}

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


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.