Styling and scaling for mobile devices

If you want your application to display properly on iPad, iPhone or Android there are two things to do:

Define a stylesheet for mobile devices

Using the media attribute on stylesheet HTML tags allows you to have a CSS for mobile browsers:

Copy<!--[if !IE]><!-->
  <%= stylesheet_link_tag 'mobile', :media => 'only screen and (max-device-width: 1024px)' %>
<!--<![endif]-->

Here I chose 1024 pixels as the maximum device width to include the iPad. If you want to target only mobile phones, pick 960 to include high-end Android devices and iPhone 4. Also, you could define separate stylesheets for certain ranges by toying around with min-device-width.

The IE conditional is to keep Internet Explorer out which tries to use the stylesheets even though he should not.

When using Haml you need to nest the above code inside an :erb section as the conditional cannot be formed with Haml.

Set a recommended width for the application

Screen space on mobile devices is scarce but still they need to guess how wide your page is. Help them out by setting the viewport meta tag (Haml here):

Copy%meta{ :name => 'viewport', :content => 'width=600px' }

Devices with a higher resolution will now zoom in which might look awkward. Allow them to use any extra space by setting the maximum zoom to 100% like this:

Copy%meta{ :name => 'viewport', :content => 'width=600px, maximum-scale=1.0' }

That way devices with a smaller resolution would zoom out a bit but fit the page as good as possible (here, our page is 600 pixels wide in the mobile CSS) but larger ones (like the iPad) will not pixel any icons by zooming in too far.

Note that setting maximum-scale will not allow users to zoom in further. You can also use initial-scale to set the default zoom to 100% but this will not make devices with smaller screens zoom out by default:

Copy%meta{ :name => 'viewport', :content => 'width=600px, initial-scale=1.0' }