Responsive Page Setup

This section details the initial setup of a responsive page. Some resets need to be applied to start with a clean slate and build consistency from scratch.

Preparing the Viewport

Initially, desktop browsers did not have to account for various aspects of the web. As mobile phones, tablets, and all sort of other devices came on the scene, consuming websites that were initially built for desktop monitors did not scale well for those devices. Modern mobile browsers do a better job of scaling websites properly on the screns of those device. However, since we can't rely on the modern capabilities (or lack there of) of browsers, we need to ensure proper scaling and zooming.

To provide instructions to browsers on how to handle web page dimensions and scaling, we need to prepare the viewport, by adding this to every page on your website or app:

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

The width=device-width portion sets the viewport width to that of the screen width of the device. The initial-scale=1.0 portion sets/ensures the initial zoom of the page on load. For more information, check out the MDN viewport docs.

Text Inflation Algorithm

Some browsers, especially within mobile devices, include an automatic mechanism for inflating text to help readability. This can be experienced when a user turns a mobile phone from portrait to landscape mode. The text increases in size automatically. This can be helpful, but it also creates inconsistencies across browsers right out of the gate. To start with a consistent baseline allows for optimal control and consistency.

To turn this behavior off and get things down to a consistent baseline, use text-size-adjust:

html {
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
}