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 O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.