Make your React apps accessible more mobile-friendly in 5 minutes

Introduction

If you're building a website that you plan on people using (if you're not, please comment below), you need to account for the fact that many people are on mobile. While writing @media queries can be frustrating, it could be a lot simpler.

The Issue

The reasoning behind this is simple. While laptop users have a horizontal aspect ratio, phones can rotate, but most users preferred orientation for browsing the web is vertical. This means that you need to write CSS to detect when a phone-like device is present rework some if not most of your existing styles to account for this (most developers usually write for monitor-like or laptop-like ratios, but a subset will write apps meant firstly for vertical ratios).

But even though the proportions are different, styles could be simpler if phones had a horizontal aspect ratio: and they do. You simply need to inform users that they should rotate their device, which is quick and easy on modern smartphones.

The Solution

The team here at Bluspace has made as a part of our efforts to give back to our main users, developers, a React component to simplify this. We've open sourced the detect-portrait library, which we used internally in The Space.

Install it:

npm install detect-portrait

It's pretty easy to use. It has 3 props:

message: The message the modal displays when the user's device is in portrait mode.

textColor: The color of the modal text.

backgroundColor: The color of the modal background.

Here's an example:

<OrientationModal 
message="Please turn your device to landscape mode 😁" 
textColor="black" 
backgroundColor="white"
/>

Additionally, if you'd like more tools to speed up development, you can check out ByteStackTools, made by our team.