Tweaking HTML and CSS for iPhone without a separate site
Here is an initial overview that I’ll fill in with specifics. So far I’ve applied it to an HTML site on an Apache web server and a MediaWiki wiki (PHP). I have yet to apply it to this blog (WordPress). For each that I do, I plan to give specific code examples.
1) For your platform, learn how to do a conditional include, where the condition is that when the browser is iPhone, that something will be shown, while for everything else, another thing. First do this in a part of the page that is visible.
If iPhone
YIP
Else
NIP
Endif
2) Make a copy of your style sheet, naming it something like style-i.css.
3) Use the conditional logic in the HEAD of the HTML to use style-i.css when it is iPhone, otherwise the regular one.
4) Use the same conditional logic wherever tables or cells are fixed width - with the iPhone version take away the width measurement. For instance, if a TD is defined with a width of 600 pixels, make it just a TD without the width for the iPhone. That way the page content will fill the width, whether vertical or horizontal.
5) In the style sheet for the iPhone, define fonts with em’s and make them a lot bigger than usual. 2, 3, or 4 em. Everything seems to get so small on the iPhone, so it is important to boost the fonts.
6) In the iPhone style sheet, add a special definition for img - making them go 100% in width and auto in height.
The iPhone shrinks sites, so it is important to boost the size of elements.
regular font size:
TD {
font: .75em/1.25em Verdana, Tahoma, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
}
iPhone font size:
TD {
font: 3em Verdana, Tahoma, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
}
Best style for my images to display on iPhone, whether vertical or horizontally held:
img {
width: 100%;
height : auto;
}
This worked well for my legacy site. If an image was within a table cell that itself had constraints, for instance, if it was is a TD that was set to be 50% of the page, then images set this way are held to 50%. On the wiki, if images are not held by a cell, then they can easily expand too much.
Server-side switching of style sheets in SHTML or HTML parsed as if it were SHTML:
To parse .html and .htm files for server-side includes on an Apache web server, add the following to your .htaccess file:
AddType text/html .shtml
AddHandler server-parsed .shtml .html .htm
Changing a part of an SHTML (or HTML page that is parsed like SHTML on an Apache Server) page for the iPhone - where TD’s have a fixed width:
Adding the iPhone style sheet to a MediaWiki wiki, in MonoBook.php, below the title line:
<?php
$browser = strpos($_SERVER['HTTP_USER_AGENT'],”iPhone”);
if ($browser == true) { echo ‘ ‘; }
?>
Changing part of the MediaWiki template that may be fixed:
<?php
$browser = strpos($_SERVER['HTTP_USER_AGENT'],”iPhone”);
if ($browser == true) { echo ”; }
else { echo ”; }
?>
In MediaWiki, the category pages have three columns that force horizontal scrolling in the iPhone. To make them one column, edit a line in includes/CategoryPage.php from
$chunk = (int) (count ( $articles ) / 3);
to
$chunk = (int) (count ( $articles ) / 1);
Boosting the size of the field elements.
In the iPhone css, here is how I made the search field usable.
If I hadn’t done this, it would be way too small:
input, select, textarea {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 85%;
}