Hallo zusammen,
ich habe mal eine Frage zum Thema Smartphone und Mobile Design.
Normalerweise kann ich doch über css und media verschiedene Sheets definieren.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>www.olivereikel.de - Tim-O Ticketmanager Online</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<link rel="icon" type="image/ico" href="favicon.ico">
<link rel="shortcut icon" href="favicon.ico">
<style>
/* ------- especially for smartphones -------- */
@media only handheld and (max-width: 966px) {
body {font-size: 12px;color:green;}
/* any colons wanted? */
td:nth-child(2):after {content: ":"; }
/* ---- a little styling ----- */
td:first-child {padding: 5px 20px 0 0;}
td:nth-child(2),
td:nth-child(3) {float: left; padding-top: 5px;}
table td::before {
content: attr(data-th)":";
display: inline-block;
font-weight: bold;
margin-right: 0.25em;
}
table tr {
margin: 0.25em 0 0.25em 0;
}
table td, table tr {
display: block;
}
table th {
display: none;
}
}
/* ------- especially for smartphones -------- */
@media only screen and (min-width: 967px) {
body {font-size: 12px;color:red;}
/* any colons wanted? */
}
</style>
</head>
<body>
<script language="JavaScript">
document.write("Breite: "+document.body.offsetWidth);
document.write("<br>höhe: "+self.innerHeight);
</script>
<table>
<tr>
<th>Name</th>
<th>Straße</th>
Also eine ganz normale Tabelle, welche bei Screens < 966 pixel (telefon hat 965 pixel) grün ist und >966 pixel rot ist. Erstmal ganz banal zum testen.
Verkleinere ich das Browserfenster tuts das wie es soll. Auch unter
http://mobiletest.me/
sieht alles gut aus. Rufe ich die Seite mit meinem Smartphone auf geht es einfach nicht.
Das kleine Javascript soll mir die aktuelle Größe zeigen. Das dumme Telefon zeigt mir einfach eine rote Tabelle. Die Testwebsite und auch ein verkleinern des Browserfensters zeigt genau den gewollten Effekt. Nämlich das die Schrift grün wird und aus der Tabelle ein Liste wird. Ich habe schon 480pixel genommen und auch 1000 pixel. Das Telefon will nicht.
Woran liegt das?
mfg
tsunamitsunami