iPhone CSS

This CSS to be used to display website nicely on iPhone. Not tested on Android and other smart phones.

Add this code on top of what ever css style you have.

1
2
3
4
5
<!-- Start iPhone -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link rel="apple-touch-icon" href="/images/money.png" />
<link media="only screen and (max-device-width: 480px)" href="/iphone.css" type= "text/css" rel="stylesheet" />
<!-- End iPhone -->

In iphone.css file, just write the css code. For example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body,td,input,textarea,select,label { font-size: 6em;}
mainlink {font-size:3em; }
body {
background-color: #fff;
}
 
.header, .footer {
width: 100%;
}
 
.sidebar {
display: none;
}
 
.mainlink {	color:#FFFFFF; font-size:150%; }
 
.mainlink A:link {text-decoration: none; color:#FFFFFF; }
 
.mainlink A:visited {text-decoration: none; color:#FFFFFF; }
 
.mainlink A:active {text-decoration: none; color:#FFFFFF; }
 
.mainlink A:hover {text-decoration: underline; color:#FFFF66; }

Leave a Reply

Your email address will not be published. Required fields are marked *