Crossdevice layout

The CSS2.1 specification defines the types of devices (carriers) for which the styles are applied:

• all - for all devices;
• braille - for devices that display information in Braille;
• embossed - for printing devices in Braille;
• handheld - for mobile devices;
• print - for print and display devices in print preview mode in browsers;
• projection - for presentations (projectors);
• screen - for computer screens;
• speech - for speech synthesizers (in CSS 2 - aural);
• tty - for terminals;
• tv - for tv.

In the articles Print sites and Print sites 2 @ mihallica wrote about styles for printing. I want to dwell on the features of the use of styles for mobile devices.

1. Theory

The main reasons for which you need to separately describe the styles for mobile devices are the following:

1. Restrictions screen resolution.
2. Limitations of network bandwidth (low speed and high cost of traffic).

It would seem that everything is simple - you remove all unnecessary (heavy background pictures, various auxiliary information blocks), place all the remaining information in one column and determine the type of handheld device for this style.

But the problem is that modern mobile browsers: Opera Mobile 9.5+ , Opera Mini 4+ , Safari in iPhone, by default, use screen styles. Here is how Opera developers explain it:

The main problem with handheld styles is that you do not give users the opportunity to select content that is delivered to their phone. Nowadays, phones are much more powerful than before, and it is a bit annoying when a website sees that you are accessing from a mobile device and provides you with a simplified version, despite the fact that the device easily supports a full version of the site.

In general, this is the logic, the latest versions of mobile browsers in their display capabilities are not inferior to their desktop counterparts.
')
But what to do if creating a mobile version of styles you do not want users to limit something in a functional way, but only trying to change the display? This will help us to Media Queries .

The bottom line is that by connecting any style we can, in addition to the device type, add additional conditions for its use (width, height, screen orientation, aspect ratio, color support). A complete list of parameters and their application can be found here: Media Queries .

Fresh versions of mobile and desktop browsers already support Media Queries, despite the fact that the document is still in the status of Candidate Recommendation

2. Practice

Here is the definition of styles for the desktop, mobile and print versions of the site.

 <! —- connect styles for Opera, Safari, Firefox, Chrome desktop browsers -> 
 <link rel = "stylesheet" type = "text / css" href = "css / style.css" media = "screen and (min-width: 601px)" />

 <! —- connect styles for Internet Explorer -> 
 <! - [if IE]>
    <link rel = "stylesheet" type = "text / css" href = "css / style.css" media = "screen" />
 <! [endif] ->

 <! —- connect styles of mobile version -> 
 <link rel = "stylesheet" type = "text / css" href = "css / handheld.css" media = "handheld, only screen and (max-width: 600px)" />

 <! —- connect print styles -> 
 <link rel = "stylesheet" type = "text / css" href = "css / print.css" media = "print" />
      
 <! —- connect styles common to all versions -> 
 <link rel = "stylesheet" type = "text / css" href = "css / content.css" media = "all" />

Let's sort the code:

 <link rel = "stylesheet" type = "text / css" href = "css / style.css" media = "screen and (min-width: 601px)" />

The style should be applied to browsers with a display width of at least 601 pixels. In general, it would be more correct to write media = “only screen and (min-width: 601px)”, but then Firefox would remain without styles (Media Queries promise to be implemented in the next version 3.1 / 3.5).

 <! - [if IE]>
    <link rel = "stylesheet" type = "text / css" href = "css / style.css" media = "screen" />
 <! [endif] ->

We connect styles for all versions of Internet Explorer (support for Media Queries is not yet known).

 <link rel = "stylesheet" type = "text / css" href = "css / handheld.css" media = "handheld, only screen and (max-width: 600px)" />

We connect styles for all mobile browsers, as well as desktop browsers with a display width of no more than 600 pixels. This width is chosen so that not only mobile phones and PDAs, but also netbooks fall into it.

We get the following result:

Desktop version


Print version


Opera Mini


iPhone Safari

3. Testing

The display in Opera Mini browser can be checked here:
http://www.opera.com/mini/demo/

Mapping in Opera Mobile and iPhone Safari can be seen in the desktop versions of these browsers simply by reducing the width of the window (with a width of less than 601 pt. They will switch to mobile styles). In addition, in Opera you can force the use of mobile version styles by ticking off in the menu View -> Small Screen.