3e8.org

Recently I have optimized this site and chickadee for display on iPhone and other small displays, using CSS3 @media queries to alter the layout as described at hicksdesign and elsewhere. This site has always sported a fluid layout so the conversion was not difficult. However, I'd like to note a couple things that I didn't see explored sufficiently elsewhere.

1. Use only initial-scale=1 in specifying viewport.

   Most sites seem to recommend the use of

   <meta name="viewport" content="width=device-width" />

   which will make iPhone treat the viewport as 320px across. This is wrong for landscape mode, which is 480px, and will render larger instead of adding to available horizontal space. Instead in a properly fluid layout you should omit an explicit width and use

   <meta name="viewport" content="initial-scale=1" />

   Webkit browsers will then set the width to device-width in portrait mode, and device-height in landscape.

2. Prefer width instead of device-width in media queries not explicitly targeted at iPhone.

   Since width may now be the device width or height, you need not use the orientation property to distinguish between portrait and landscape, but rather just the width of the viewport. For example with the two queries below you can handle both orientations on iPhone, and also handle desktop browsers with small windows:

   @media screen and (max-width: 600px) {}
   @media screen and (max-width: 400px) {}

   Of course you can still target iPhone and iPad directly with max-device-width, for example to increase link size for the touchscreen.

3. Turn off Webkit's automatic font size adjustment.

   Mobile Safari will sometimes increase your font size without your permission, usually in landscape mode. This can be useful for the average website not optimized for mobile use, but is counterproductive in our case. You should turn this off for iPhone:

   @media only screen and (max-device-width:480px) {
     html { -webkit-text-size-adjust: none; }      }

   iPad already has this property set to "none". Also, this directive will cause desktop Safari to ignore the user's text zoom setting, so make sure it is wrapped in the iPhone-only media query as above.

   Edit: Setting the value to "100%" instead of "none" supposedly allows text zoom, avoiding the need for the iPhone media query, but I haven't tested it yet.