Hi.
I decided to have ago of adding an extra .css sheet for the iPhone to one of the pages of my site. I made the new .css sheet to show no images and have a width of 480px, plus a few other things and called it iphone.css, then saved it in the root of my site along with the other .css sheets (The print.css works fine as does the index.css).
I placed the link in my code as below:
<head>
<title></title>
<meta name=“description”
content=" “>
<meta name=“keywords”
content=”“>
<META NAME=“Copyright” content=” ">
<META HTTP-EQUIV=“content-language” content=“EN”>
<META NAME=“Rating” content=“The Moral Maze”>
<meta http-equiv=“content-type” content=“text/html; charset=utf-8” />
<link media=“only screen and (max-width: 480px)” href=“iPhone.css” type=“text/css” rel=“stylesheet” />
<link rel=“stylesheet” media=“screen” type=“text/css” href=“index.css” />
<link rel=“stylesheet” media=“print” type=“text/css” href=“print.css” />
</head>
<body>
Even if I put (max-device-width: 480px) it still uses the index.css when accessing the page with an iPhone. (The index.css is for a computer screen showing images etc…)
What am I doing wrong? The code I have used everyone is suggesting but it just doesn’t work. I was thinking of using “@import” but I am not sure how to make that target the iPhone nor do I know where to place it into my code.
Not having an iPhone myself I accessed my page on two different (family) iPhones yesterday which confirmed to me that the iphone.css was not being used. However I have downloaded the “iPhone Simulator” that uses the iphone.css and “iPhoney” another iPhone simulator which is behaving as the “real” iPhone is behaving and does not use the iphone.css.
Any help would be appreciated.
God bless.
In Christ Jesus, Karl.