nicht angemeldet
Hallo Zusammen,
habe folgendes Problem. Ich habe ein iPhone und möchte das eine dementsprechend kleinere Version meiner Seite geladen wird wenn man sie mit dem iPhone besucht.
Meine Idee war nun einfach zwei CSS Dateien zu erstellen, eine für Computer und eine für das iPhone. In der HTML Datei wollte ich dann durch entsprechende Tags auf dem iPhone den Computerteil und auf dem Computer den iPhoneteil ausblenden durch display:none
Hier der Code:
iphone.css:
computer { display: none; }
iphone {display: inline; }
computer.css:
iphone { display: none; }
computer { display: inline; }
test.html:
<html>
<meta name="viewport" content="width=320" />
<head>
<title></title>
<link rel="stylesheet" href="computer.css" type="text/css">
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css">
</head>
</head>
<body>
<computer>
Computer
</computer>
<iphone>
iPhone
</iphone>
</body>
</html>
Man soll also auf dem iphone nur das Wort "iphone" sehen und auf dem computer nur das Wort "Computer".
Auf dem iPhone, mit Firefox (Windows) und Safari (Mac) funktioniert, mit dem Internet Explorer sehe ich allerdings beides?!?
MFG
Christian
Gunnar Bittersmann