Css Adapter
Introduction
Sample
Parameters
Details
Examples
Introduction
The css adapter is used to reformat font sizes in css documents dynamically for a mobile site. It uses the useragent of the current http request to determine the handset and resizes the fonts accordingly.
Sample
Css Adapter usage urls must be in the following format:
http://www.mobileelements.com/CssAdapter?key=00000000000000000000000000000000&src=http://5thfinger.com/css/master.css
This example takes the original stylesheet (located at http://5thfinger.com/css/master.css)
...
a, a:link, a:visited, a:hover{
font-family:"Trebuchet MS", Arial, Verdana, "Times New Roman";
color:#464646;
font-size:13px;
font-weight:bold;
text-decoration:none;
}
a:hover{
font-family:"Trebuchet MS", Arial, Verdana, "Times New Roman";
color:#99CC00;
}
h2{
font-family:"Trebuchet MS", Arial, Verdana, "Times New Roman";
font-size:18px;
font-weight:bold;
color:#231f20;
text-align:center;
margin:0;
padding:0;
}
...
and replaces all the "font-size" values for use on the mobile device currently viewing it:
...
a, a:link, a:visited, a:hover{
font-family:"Trebuchet MS", Arial, Verdana, "Times New Roman";
color:#464646;
font-size:22px;
font-weight:bold;
text-decoration:none;
}
a:hover{
font-family:"Trebuchet MS", Arial, Verdana, "Times New Roman";
color:#99CC00;
}
h2{
font-family:"Trebuchet MS", Arial, Verdana, "Times New Roman";
font-size:27px;
font-weight:bold;
color:#231f20;
text-align:center;
margin:0;
padding:0;
}
...
You can include an adapted css document in an HTML document by embedding a URL within a standard css reference <link> tag. For example:
<link href="http://www.mobileelements.com/CssAdapter?key=00000000000000000000000000000000&src=http://5thfinger.com/css/master.css" rel="stylesheet" type="text/css" />
Parameters
Parameters are separated with the ampersand (&) character. You can specify the parameters in any order.
| Parameter | Description | Required? |
|---|---|---|
| key | Your user key (view My Account to retrieve your key) | Yes |
| src | The url for the source stylesheet (eg http://5thfinger.com/css/master.css) | Yes |
Details
The css adapter will use the current http request useragent to match the device
viewing the stylesheet. If the "ua" parameter is supplied, it will override the useragent
and the input parameter value will be used to match the device instead.
The css adapter is designed to resize fonts relative to a default font size of 12px.
For example, if the font-size attribute of a device is "20px", any reference to fonts
of size 12px will be replaced with size 20px. All other font sizes will be resized with
the same ratio (ie 20/12 = 1.667) so a font size of 18px will become 30px (18 * 1.667 = 30).
The css adapter only resizes "font-size" css tags. When sizes are included in a standard "font"
tag, they will be ignored. Inline font sizes will also be ignored (eg <span style="font-size:30px">).
Examples
For all of the reasons above, it is recommended that all font sizes be placed in your stylesheet and not inside the html. Its also recommended to used linked stylesheets, as the css adapter cannot read the adapt any css inside the html page itself. A good example of this is:mystyle.css
.smallfont {
font-size:8px;
}
.mediumfont {
font-size:12px;
}
.largefont {
font-size:18px;
}
mypage.html
<html>
<head>
<title>Font Sizes</title>
<link href="http://www.mobileelements.com/CssAdapter?key=00000000000000000000000000000000&src=http://mydomain.com/mystyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="smallfont">Small Font</div>
<div class="mediumfont">Medium Font</div>
<div class="largefont">Large Font</div>
</body>
</html>
Back to Top
+