PHP Forum

PHP Forum (http://www.selfphp.de/forum/index.php)
-   PHP Entwicklung und Softwaredesign (http://www.selfphp.de/forum/forumdisplay.php?f=14)
-   -   Mobile Media (http://www.selfphp.de/forum/showthread.php?t=25970)

tsunamitsunami 13.12.2016 17:47:15

Mobile Media
 
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:25:04 Uhr.

Powered by vBulletin® Version 3.8.3 (Deutsch)
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.