Mobile

Mobile traffic overtook desktop traffic in October 2016; as of 2026, approximately 2/3 of website traffic comes from mobile devices, compared to 1/3 from desktop browsers.

Mobile preview

The developer tools on your desktop browser allow you to preview your page as if it were being viewed in a mobile browser. This is sufficient to handle ~90% of mobile issues.

Chrome
Firefox
Safari

Chrome docs on simulating mobile devices

First open your DevTools with the keyboard shortcut Ctrl+Shift+I⌥⌘ICtrl+Shift+I (toolbar: View > Developer > Developer Tools). Then press Ctrl+Shift+M⌘⇧MCtrl+Shift+M (or click the second icon from the left) to toggle the device toolbar.

CSS for mobile

Media queries

Media queries let you selectively apply CSS styles depending on properties of the user's device. The relevant ones for mobile design are width, height, and orientation.

@media (width <= 480px) {
  /* styles only for small smartphones */
}

@media (width >= 481px) {
  /* styles for tablets/laptops/desktop */
}

@media (481px <= width <= 768) {
  /* styles for tablets only */
}

@media (width >= 1280px) {
  /* styles only for large desktops */
}

The pixel values used above are called breakpoints. Since there is such a wide variety of mobile devices, there is no standard for these values. Some suggested values are listed below, but they may need to be adjusted depending on your design.

Device	Width (px)
Small smartphones	0–480
Tablets, large smartphones	481–768
Laptops, large tablets in landscape	769–1279
Large laptops, desktops	1280+

Debugging real devices

While Responsive Design Mode is sufficient for most purposes, you still want to test on an actual device (especially older devices). Here is how to connect your developer tools to a mobile browser.

Connecting to localhost from a mobile device

If your site is already published, you can just visit its web address on your mobile device. But for live-debugging, you want to give your mobile device access to your computer's localhost server. Here are the steps for doing so.

Plug your iPhone into your laptop via USB.
Make sure your iPhone and laptop are connected to the same Wi-Fi network. You may also need to disable VPNs.
Get your local IP address by going into System Settings > Wi-Fi > Details > TCP/IP:
Enter that IP address into your local device, along with the port. For example, if you access your local server as http://localhost:3000 on your laptop, and your laptop's local IP address (from the previous step) is 192.168.0.33, you would enter http://192.168.0.33:3000 on your mobile device.
Follow the device-specific instructions below for accessing the developer tools.

iPhone / iPad

Apple docs on inspecting iOS and iPadOS

Open Safari on your computer (other browsers will not work). Connect to your device from the Develop menu. Now you can use the developer tools to inspect elements, log to the console, and so on.

Android

Google docs on debugging Android devices

On your Android device, follow these instructions to enable developer options.
On your Android device, go Settings > Developer options and enable USB debugging.
Open Google Chrome on your computer (Firefox/Safari will not work). Go to chrome://inspect#devices. You should see your device listed there. If not, you may need to try with a different USB cable.

Mobile preview​

CSS for mobile​

Media queries​

Debugging real devices​

Connecting to localhost from a mobile device​

iPhone / iPad​

Android​