WebTools branding banner, with hammer and wrench tools in background

CSS for Handheld Devices

Handheld devices may have issues when displaying the State Template, since their screen widths may be as low as 320 pixels. In order to accomodate these devices, separate CSS rules can be added specifically for them.

Instructions

  1. Copy handheld.css to your css folder. If you have additional styles that you want to display on handhelds, you may add them to this file.

  2. In your HTML pages, delete the opening and closing <style> tags around your @import statements.
    <style type="text/css">
    ...
    </style>

  3. Replace each @import statement with a <link> tag.
    For example, replace:
    @import url("css/ca_master.css"); with: <link rel="stylesheet" href="css/ca_master.css" media="screen, projection, print, tv" type="text/css" />

    This tag will apply the stylesheet to the page when displayed on screen, projection, print and tv media types. It will be hidden from handhelds.

  4. Add a <link> tag for the new handheld.css file.

    <link rel="stylesheet" href="css/handheld.css" media="handheld" type="text/css" />

  5. Your finished code will look similar to this:

    <!-- **************************************************************** -->
    <!-- Begin Style Information -->

    <!-- ***** The master style sheet - DO NOT CHANGE ***** -->
    <link rel="stylesheet" href="css/ca_master.css" media="screen, projection, print, tv" type="text/css" />

    <!-- ***** The department-specific style sheet statement goes here ***** -->
    <link rel="stylesheet" href="css/ca_department.css" media="screen, projection, print, tv" type="text/css" />

    <!-- ***** Select the 1-level or 2-level navigation ***** -->
    <link rel="stylesheet" href="css/navigation_2_level.css" media="screen, projection, print, tv" type="text/css" />

    <!-- ***** Select the 1, 2 or 3 column content section ***** -->
    <link rel="stylesheet" href="css/content_3_column.css" media="screen, projection, print, tv" type="text/css" />

    <!-- ***** Select a color scheme ***** -->
    <link rel="stylesheet" href="css/color_scheme_01_sf.css" media="screen, projection, print, tv" type="text/css" />

    <!-- ***** Style sheet for handheld devices ***** -->
    <link rel="stylesheet" href="css/handheld.css" media="handheld" type="text/css" />

    <!-- End Style Information -->
    <!-- **************************************************************** -->

 

Test your page

If you don't have a cell phone or other handheld with Internet access, you can use an emulator to test your pages.

  • Opera
    Click the "View" menu item, "Small screen". Or press shift-F11.
  • Firefox with the Web Developer extension
    Click the "CSS" menu item, "Display CSS By Media Type", "Handheld".
  • Mobile Website Resources