RESIZE YOUR WEBSITE FOR MOBILE WEB BROWSERS

One lesser-known feature of CSS is its capability to alter your site’s layout based on display size. This means that when your site is viewed on a mobile browser, an optimized layout for the screen real estate can appear.

Nothing is more annoying than going to a website on your favorite mobile device only to find a desktop-sized layout compressed into a tiny screen, or a layout so oversimplified and stripped down that the most useful features are crippled or absent.

There are a few different ways to apply this technique to your website. CSS allows for a media attribute to target a style sheet by hardware. For example, you can instruct the browser to apply base.css for all media and superimpose mobile.css ...

Get HTML5: Your visual blueprint™ for designing rich web pages and applications now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.