Do you set device width when designing responsive web applications?

Last updated by Jayden Alchin [SSW] 9 months ago.See history

Creating a responsive website? It's important to make sure the browser renders your content correctly on any screen size. Define the proper viewport meta tag to inform web browsers they need to behave responsively.

<meta name="viewport" content="width=device-width" />

Your website's viewport should be the same width as any given device's screen. Specify this with the content attribute _device-width_.

viewport bad
Figure: Bad example - No viewport meta tag

viewport good
Figure: Good example - Correct viewport meta tag

Resize Text

The viewport meta tag should not set _user-scaling=no_ or a _maximum-scaling_ value less than 2. This allows us to meet accessibility standards for scalable content. See WCAG 1.4.4.

We open source. Powered by GitHub