HTML & CSS

How to Test Responsive Web Design Cross-Browser Compatibility

Craig Buckler
Share

HTML is an inherently fluid medium. Text and containers expand horizontally and vertically to use the available space. That fluidity made complex designs more difficult, so by the turn of the millennium, many sites adopted a fixed-width based on popular screen sizes.

The process remained viable as screen sizes kept increasing from 800×600 to 1024×768 and beyond. However, the rise of smartphones and the iPhone launch in 2007 reversed that trend. Today, more than half of users access web pages on a smaller mobile device.

Note: Technically, smartphones often have a higher resolution than many monitors, but individual pixels become invisible. An iPhone 11 Max translates its 2688 x 1242 hardware resolution to a more practical 896 × 414 logical resolution. Each logical pixel maps to a grid of 3×3 real pixels, which enables smoother fonts and increased image detail.

The initial workaround was two sites: one for desktop and one for mobile, often with user agent sniffing to redirect as necessary. This rapidly became impractical as the variety of devices grew exponentially.

Finally, the term Responsive Web Design (RWD) was devised by Ethan Marcotte in 2010. The technique allowed the same site to work on any device regardless of screen size or viewport dimensions.

How Does RWD Work?

There’s no single RWD approach or technology.

First, you must determine how a site design will react to differently sized displays. This is a challenge, and many of the first RWD sites took an existing desktop layout and removed sections as screen dimensions reduced.

A better technique was mobile first. It started with a linear mobile view, which worked on all devices then rearranged or adapted content as more space and supported browser features became available. More recently, many sites have adopted simpler layouts, where the mobile and desktop experience is mostly similar.

A typical example of RWD in action is the hamburger menu. Those on smaller screens can click an icon to view navigation links, while those with larger screens may see all the options in a horizontal list.

The following sections provide a number of technical implementation options.

HTML viewport Meta Tag

Regardless of any RWD technique, the following tag must be set in your HTML <head>:

<meta name="viewport" content="width=device-width,initial-scale=1">

The width=device-width setting ensures mobile browsers scale logical CSS pixels to the width of the screen. Without this, the browser will presume it’s rendering a desktop site and scale it accordingly so it can be panned and zoomed.

Media Queries

Media queries were the primary basis of the first RWD sites. They allow CSS to target specific ranges of viewport dimension. For example:

/* styles applied to all views */
p {
  font-size: 1rem;
}

/* styles applied to viewports
   with a width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {

  p {
    font-size: 1.5rem;
  }

}

Media queries are still used, although less explicit options are now available.

<picture> Elements

The HTML <picture> element uses media query syntax to control which image is displayed from a choice of <source> options. This is typically used for art direction in order to display a suitable image for device viewport. For example:

<picture>

  <!-- image shown when viewport
       width is greater than the height -->
  <source  srcset="landscape.jpg"
            media="(min-aspect-ratio:1/1)"
              alt="landscape" />

  <!-- default image -->
  <img src="portrait.jpg" alt="portrait" />

</picture>

CSS Viewport Units

The vw and vh CSS units represent 1% of the viewport’s width and height respectively. vmin is 1% of the smallest dimension, and vmax is 1% of the largest dimension.

These permit RWD flexibility, especially when used in conjunction with calc. For example:

/* font size increases with viewport width */
p {
  font-size: 1rem + 0.5vw;
}

CSS Columns

CSS multi-column layouts provide a way to create multiple text columns as the dimensions of a container increase. For example:

/*
columns must be a minimum width of 12rem
with a gap of 2rem between each
*/
.container {
  columns: 12rem auto;
  column-gap: 2rem;
}

CSS Flexbox and Grid

CSS Flexbox and CSS Grid provide modern techniques which lay out child elements depending on their content and the space available. The primary difference:

  • Flexbox is used for one-dimensional layouts. Elements can wrap (or not) to the next line as necessary so columns may not line up.
  • Grid is for two-dimensional layouts, usually with identifiable rows and columns.

Either can be used to create an intrinsic layout (a term devised by Jen Simmons). In essence, elements are sized according to the viewport dimensions without the need for media queries. For example:

/*
Child elements will be at least 20rem and fill the row.
Displays smaller than 20rem will have elements sized to 1fr
(100% of the available width).

A 1rem gap will always surround elements.
*/
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-gap: 1rem;
}

JavaScript RWD Options

JavaScript can also be used to determine viewport dimensions and react accordingly. For example:

// get viewport width and height
const
  vw = window.innerWidth,
  vh = window.innerHeight;

Similarly, the dimensions of an individual element can be examined with offsetWidth and offsetHeight, although the getBoundingClientRect() method can return more information including fractions of a pixel:

const
  element = document.getElementById('myelement'),
  rect    = element.getBoundingClientRect(),
  ew      = rect.width,
  eh      = rect.height;

Window and element dimensions can change as a device is rotated or the browser window is resized. The matchMedia API can parse CSS media queries and trigger change events:

// media query
const mql = window.matchMedia('(min-width: 600px)');

// initial check
mqTest(mql);

// call mqTest when media query changes
mql.addListener(mqTest);

// media query testing function
function mqTest(e) {

  if (e.matches) {
    console.log('viewport is at least 600px width');
  }
  else {
    console.log('viewport is less than 600px width');
  }

}

Browser Support

The RWD technologies above all offer good browser support. The most recent option — CSS Grid — is supported by almost 95% of browsers in use today. However, it’s still necessary to test your site across a range of devices, resolutions, and browsers…

In-browser Testing

Resizing your browser window is a reasonable testing strategy for a few hours, but it rapidly becomes inaccurate and cumbersome. Most browsers offer a Responsive Design Mode which lets you select a device and user agent, rotate it, choose a resolution, alter the pixel density, throttle bandwidth, emulate touch, and take screenshots.

In Firefox, select Responsive Design Mode from the Web Developer menu or press Ctrl | Cmd + Shift + M:

Firefox Responsive Design Mode

In Chromium-based browsers, open Developer tools from the More tools menu or press Ctrl | Cmd + Shift + I. Then click the Toggle device toolbar icon:

Firefox Responsive Design Mode

Switch back to the browser tab to view the resized site:

Chrome device toolbar

In Safari, enable the Show Develop menu in menu bar option from the Advanced tab of the browser Preferences. Load a page and choose Enter Responsive Design Mode from the Develop menu.

However, be aware that these tools only imitate a device’s screen dimensions and user agent. They cannot accurately emulate the following:

  • Rendering capabilities

    The browser will use its own rendering engine — not that of the emulated device. A CSS feature that works in Firefox would “work” on its emulated iPhone view regardless of actual support. That said, Chrome desktop will show a reasonable approximation to Android Chrome, and macOS Safari will be similar to the iPhone because they’re based on the same rendering engines.

  • Older devices

    Testing the iPhone browser view on the latest version of Safari cannot accurately represent older devices with legacy operating systems and software.

  • High-density displays

    You’re limited to your PC monitor’s physical pixels, so a site may look better or worse on a real device.

  • Touch

    A mouse or trackpad has finer control than a touch-screen device with a small display. It may be impossible to view effects applied on-hover.

  • Processing speed

    Your PC is likely to have a faster network and processing speed than a mobile device.

Mobile OS Emulators

Running an Android or iOS virtual machine on your device allows you to install and run real mobile browsers and use their actual rendering engines.

Android emulators include:

Chrome is the obvious browser choice for Android, but you can also install Opera Mini, which is prominent on lower-powered feature phones.

Options for iOS are more limited:

These emulators still have downsides:

  • The software requires some technical expertise and uses considerable system resources.
  • Many iOS options are simulators. They adapt another rendering engine and will not always be accurate.

Online Testing Services

This segment was created in partnership with LambdaTest. Thank you for supporting the partners who make SitePoint possible.

Several online services allow you to test responsive pages on mobile browsers over the Web. In essence, you rent time on a real device and can view its screen in your browser. There’s no software to set up or maintain.

As well as live testing, some services include automated testing APIs which allow you to run scripts and check for styling regressions or broken user interfaces.

LambdaTest provides more than 2,000 combinations of device, OS, and browser. Features include:

  • testing localhost pages running on your development PC
  • debugging with integrated developer tools
  • geolocation testing from different locations
  • automatically generated, full-page screenshots across multiple devices
  • a built-in issue tracker
  • LT Browser software (Windows, macOS, Linux) to test and compare devices with auto-reload and scroll sync
  • Selenium-based automated test APIs
  • 24/7 support
  • a free plan with unlimited access from $15 per month.

Sign up for a free LambdaTest account …

LambdaTest live view

Alternative services which also provide live and automated mobile testing include:

Real Device Testing

Finally, there’s no substitute for testing on real devices. It’s the best way to assess actual processing speed, touch control, and your site’s responsive web design.

Ideally, you should test as many devices as possible, but your own recent smartphone may not be indicative of average hardware. Try to obtain mid-range devices that are a year or two old, such as a second-hand Moto G7 or iPhone 8.

Devices on the same network can access your PC’s server by entering its IP address in the browser. This can be obtained with ifconfig on macOS and Linux or ipconfig on Windows.

You can also connect a smartphone to your PC with a USB cable. This allows you to remote-control the device and easily access its developer tool panels for debugging. The technique varies across platforms but, to debug Android Chrome on the desktop edition of the browser:

  1. On the Android device, select Developer options from the Settings and enable USB debugging.
  2. Connect the device to your computer using an appropriate USB cable. The first time you attempt this, you may be prompted to confirm actions on one or both devices.
  3. Launch Chrome on your PC and open in a new tab. Ensure Discover USB devices is enabled.
  4. Optionally, set Port forwarding — for example, port 8888 on the remote device can be forwarded to localhost:8888.
  5. Your device should appear in the list. You can now inspect a new or existing tab which opens the device’s developer tools:

remote device DevTools

To debug Safari for iPhone, do the following:

  1. Connect your phone to your Apple computer.
  2. Open the web page you want to debug in Safari on your iPhone.
  3. Launch Safari on your computer.
  4. In Safari on the computer, go to Develop > [your iPhone] > [website to inspect]. This will open Safari’s developer tools on your computer, allowing you to debug the site on your iPhone.

One Site, Many Views

Responsive Web Design technologies allow you to create a single website which can be viewed by anyone on any device regardless of technical limitations and boundaries. Making it a great user experience is another matter, but the range and capabilities of testing tools continues to improve.