Browserauslesen

[Tolonath]

Servus,
heute hab ich mir Android und xCode angeschaut.
Das erste ist mir noch etwas Schleierhaft, doch xCode für iPhones speichert die Applikationen in einem Ordner.
Das ganze Sieht nicht anders als ein Ordner einer meiner HPs auf dem Server aus.

Hab mir mit einem iPhone generator auch die Webseiten angeschaut,
wie google, youtube etc.; diese werden im iPhone anders dargestellt als zB. im Firefox.
Mir ist bis jetzt nur der "if IE" Code bekannt mit dem die HP beim öffnen mit nem bestimmten IE verändert werden kann.

Wie macht der Server es bei den iPhones?
Der iPhone muss ähnlich dem Firefox Browser auch eine Art "Schlüssel" versenden
mit Hilfe dessen der Server ein iPhone passgerechtes Code zurücksendet;
irgendwie muss es so sein, denn die Seiten sehen alle anders aus und der Code ist auch anders.

Also wie erkennt der Server womit der User die HP aufruft?
(Hier vor allem iPhone-User)

Gruß
Tolonath

[Encoder]

Also wie erkennt der Server womit der User die HP aufruft?

Du hast doch den "Schlüssel" schon angesprochen. Vielleicht sendet das iphone ja auch sowas mit. Serverseitig lässt sich das auslesen, bau dir mal ein Script und schau was in $_SERVER['HTTP_USER_AGENT'] steht.

Das "if IE" bezieht sich wahrscheinlich auf CSS und nicht auf den Server.

[LX]

Hi, Tolonath

Meistenteils ist das überhaupt nicht notwendig. Das iphone versteht CSS media queries, so dass man bei bestimmten Bildschirmabmessungen die Seite umformatieren kann.

Der Trick besteht darin, seine Seiten so sinnvoll zu strukturieren, dass man die notwendigen Anpassungen komplett auf der Client-Seite durchführen kann. Erst wenn man aufgrund der Anforderungen (bspw. eine komplexe mobile Webseite, die auf 99% aller Geräte laufen soll - das habe ich erst letztes Jahr gemacht) nicht mehr mit einem Code auskommt, sollte man anhand des UserAgents unterscheiden.

Gruß, LX

[Tolonath]

Danke euch beiden für die Türen. -:)

1. $_SERVER['HTTP_USER_AGENT'] angeschaut

2. http://www.zytrax.com/tech/web/mobile_ids.html angeschaut

3. mir bewusst geworden, dass es eher um die Auflösung geht als den Browser

4. http://www.selfhtml.net/javascript/objekte/screen.htm

5. somit wäre eine JS die die Auflösung ermittelt besser, um die CSS auszuwählen
   und eine xsl mit Auflösungsvariablen zu füttern um diese zu beeinflussen
   Bsp.
   Handy senkrecht -> Auflösung 320x480
   Handy waagerecht -> Auflösung 480x320
   Davon abgesehen, dass die Auflösungen bei 240 starten und beim PC mit 1600 aufhören.

Die Handys senden ihre Auflösung per in dem Useragenten.
Wie sieht da das drehen des Handys aus?
Müsste die JS sagen wir jede sek die Auflösung abfragen?
Oder gibt das Handy beim drehen eine "Auflösungs"-Variable,
die angezapft werden kann?

[JürgenB]

Hallo Tolonath,

4. http://www.selfhtml.net/javascript/objekte/screen.htm

meistens eine Schlechte Idee. Frag lieber die Größe des Browserfensters ab.

Davon abgesehen, dass die Auflösungen bei 240 starten und beim PC mit 1600 aufhören.

und was ist ist mit den Full-HD-Monitoren? Meiner ist 1920 Pixeln breit. Habe ich jetzt keinen PC mehr? :)

Gruß, Jürgen

[Tolonath]

und was ist ist mit den Full-HD-Monitoren? Meiner ist 1920 Pixeln breit. Habe ich jetzt keinen PC mehr? :)

Da dieser Beitrag die nächsten zig Jahre bestehen wird ...
sagen wir die Auflösung hört bei 64.ooo+ Pixel breite auf *g*
diese Aussage musste für paar Jahrzehnte reichen ^^

Noch nebenbei, war mir nicht bewusst, dass die iPhones
die Lage des Gerätes erkennen, demnach müssen sie eine Variable ausspucken.
Ich glaub ich hole mir erstmal nen Apfel Rechner und das Handy um damit etwas zu spielen,
die Möglichkeiten scheinen mittlerweile grenzenlos zu sein.

[LX]

Schau Dir vorher unbedingt mal "CSS media query" an. Das erlaubt es Dir, CSS nur für bestimmte Größen und Orientierungen (landscape, portrait) zu definieren und wird von iPhone und Konsorten unterstützt.

Ansonsten empfehle ich ein fließendes Layout, welches schlimmstenfalls von einer max-width begrenzt wird, damit die Inhalte nicht ganz so verloren aussehen.

Gruß, LX

[Tolonath]

Mitternacht ... mein Kopf qualmt xD

Danke nochmal für den Schubser, hab unter anderem folgendes gefunden
http://css-tricks.com/css-media-queries/
und auf deutsch
http://www.drweb.de/magazin/media-queries-mobile-version-von-websites-mit-css3-erstellen/

Was mittlerweile mit CSS3 möglich ist hätte ich nicht gedacht,
das löst alle Bedenken in der Luft auf.

Es reicht also in die CSS
#div {hight=100}
@media all and (min-width: 800px) { #div {hight=200} }
einzutragen und das div verändert sich insofern der Browser verändert wird.
das ist einfach genial xD

Mit orientation:portrait und orientation:landscape wird erkannt wie es angezeigt wird.

Nun verstehe ich wieso es heißt "Programmierer lernen ihr Leben lang".
Ich glaub ich werd doch Frisör ^^

[LX]

Es reicht also in die CSS
#div {hight=100}
@media all and (min-width: 800px) { #div {hight=200} }
einzutragen und das div verändert sich insofern der Browser verändert wird.
das ist einfach genial xD

Nein, Du musst das ganze auch richtig schreiben: erstens heißt es "height", zweitens wird es mit einem ":" und nicht mit einem "=" vom Wert abgetrennt und drittens fehlt die Maßeinheit "px" für Pixel, die in diesem Fall vermutlich gemeint sind.

Nun verstehe ich wieso es heißt "Programmierer lernen ihr Leben lang".
Ich glaub ich werd doch Frisör ^^

Jeder lernt sein Leben lang. Diesen Prozess nennt man "Leben".

Gruß, LX

[Tolonath]

sry LX,
das  #div {hight=200} hab ich auf die schnelle geschrieben *g*
aber dafür hier mal etwas kompliziertes ... hab die halbe Nacht dran gesessen,
um das alles zu finden, verstehen und irgendwie zusammen zu schustern.
Ich muss zugeben, ich mochte nie CSS ... aber jetzt ... jetzt macht es endlich Sinn
und was wichtiger ist Spaß.

Das Code am Besten mit nem iPhone, Safari oder Opera ausprobieren.
Und mit der Maus über die Screens gehen.

viel Spaß
und danke nochmal für die Tips nach was ch suchen muss -:)

Gruß
Tolonath

<!DOCTYPE html>  
<html lang="de">  
<head>  
    <meta charset="UTF-8" />  
    <title></title>  
    <style>  
       body {  
           background-color: #e3e3e3;  
           margin: 25px auto;  
       }  
  
       table { width: 100%; height:100%;  
       }  
  
       .zoom {  
  
           position: relative;  
           background-image: url(http://s7.directupload.net/images/110131/5uexi3p7.gif);  
           background-repeat: no-repeat;  
           -webkit-background-size: 100% 100%;  
           -moz-background-size: 100% 100%;  
           -o-background-size: 100% 100%;  
           background-size: 100% 100%;  
           -webkit-border-radius: 38px;  
           border-radius: 38px;  
           border:1px solid #333;  
           -webkit-box-shadow: 0.3em 0.3em #CCC;  
           -moz-box-shadow: 0.3em 0.3em #CCC;  
           box-shadow: 0.3em 0.3em #CCC;  
          width: 75px; height: 75px;  
          -webkit-border-radius: 38px;  
          -o-border-radius: 38px;  
          border-radius: 38px;  
          -webkit-transition: 2s;  
          -moz-transition: 2s;  
          -o-transition: 2s;  
          transition: 2s;  
          z-index:1;  
      }  
  
      .zoom:hover {  
         width: 150px; height: 150px; position: relative; top:-38px;  
         -webkit-border-radius: 75px;  
         border-radius: 75px;  
  
      }  
      .schicht:hover {  
          z-index:100;  
      }  
  
      .fenster { width: 150px; height: 150px; position:relative;  
  
      }  
  
    </style>  
</head>  
<body>  
<table><tr valign="middle"><td align="center">  
<div class="fenster" ><div class="zoom schicht"></div></div>  
<div class="fenster" style="top:-70px;" ><div class="zoom schicht"></div></div>  
<div class="fenster" style="top:-140px;" ><div class="zoom schicht"></div></div>  
  
  
</td></tr></table>  
</body>  
</html>

[LX]

Hi, Tolonath!

Freut mich, dass Du Dich für CSS begeistern kannst - vielen Leuten geht das nämlich völlig ab. Wenn Du noch weiter in die Materie einsteigen willst, empfehle ich den Suchbegriff "CSS Spezifität", denn da gibt es noch einige Möglichkeiten, sich selbst ein Bein zu stellen.

Was den Code angeht: Wenn Du jetzt noch das Tabellenkonstrukt und die div-Suppe (vielleicht in Wahrheit eine Liste?) durch sinnvolles Markup und das entsprechende CSS ersetzt, hast Du den Grad an Semantik erreicht, den wir hier anstreben.

Gruß, LX

[Tolonath]

"CSS Spezifität"
zoom:hover = 0002
zoom = 0001

Wenn ich mit der Maus über ein Objekt mit dem Attribut "zoom" gehe
werden alle Eigenschaften-Werte überschrieben,
weil zoom:hover die höhere Spezifität hat.

Das div vergrössert sich wenn ich mit der Maus über gehe
und verkleinert sich wenn ich die Maus wegziehe.
Diese transition: 2s; hab ich jedoch nur im zoom definiert,
dennoch gilt es für beide.

Mein Test ...

.zoom {  
          -webkit-transition: 4s;  
          -moz-transition: 4s;  
          -o-transition: 4s;  
          transition: 4s;  
      }  
  
      .zoom:hover {  
          -webkit-transition: 1s;  
          -moz-transition: 1s;  
          -o-transition: 1s;  
          transition: 1s;  
      }

nun gehe ich mit der Maus über ...
es dauert 1 sek bis es groß wird;
entferne ich die Maus ...
dauert es 4 sek bis es wieder klein wird.

Der Eigenschaft-Wert der zoom:hover wurde von dem im zoom überschrieben .... wieso?
Der Spezifität nach dürfte zoom das zoom:hover nicht überschreiben.
Hab ich die Spezifität überhaupt richtig verstanden?

Gruß
Tolonath

[LX]

Denke schon. Grob geht es darum: je genauer Du einen Selektor beschreibst, umso bessere Chancen hat er, gegenüber weniger genauen Selektoren zu greifen. IDs sind genauer als (Pseudo-)Klassen sind genauer als Nodetypen sind genauer als "*". Wenn Du dann noch ">", "+" und "~" verstanden hast und Workarounds für den IE kennst, brauchst Du Tabellen nur noch, um tabellarische Daten abzubilden und kannst außerdem eine flache und flexible Dokumentenstruktur aufbauen.

Gruß, LX

[Tolonath]

<0>
  <s1>
    <s2>
      <s3>
<s4>
<s5>

sis alle s also s1 bis s3
s>s nur das erste s also s1
s*s alle s ab der 2ten Ebene also s2 und s3
s+s das nachfolge s also s4

* s>s kann nur von IE gelesen werden

---

s alle s im HTML
*s alle s im HTML
Wo ist da der Unterschied? ö.ö
Zitat: "Der Stern gilt als Universalselektor und bedeutet
so viel wie "für alle Elemente". Er kann auch ganz entfallen."

---

Doch was ist "~" ?
hab das im Zusammenhang der Info gefunden
Css:
td[abbr~=Berlin]
HTML:
<td abbr="Es folgen Infos zu Berlin">Eine Menge Inhalt zu Berlin</td>

Gruß
Tolonath

[Gunnar Bittersmann]

@@Tolonath:

nuqneH

Doch was ist "~" ?

General sibling combinator. [CSS3-SELECTORS §8.3.2]

hab das im Zusammenhang der Info gefunden
Css:
td[abbr~=Berlin]

In Attributselektoren bedeutet ~= etwas anderes. [CSS3-SELECTORS §6.3.1]

Qapla'

[Gunnar Bittersmann]

@@Tolonath:

nuqneH

zoom:hover = 0002
zoom = 0001
--8<--
Hab ich die Spezifität überhaupt richtig verstanden?

Nö. zoom:hover = 0011

:hover ist eine Pseudoklasse, kein Pseudoelement.

Qapla'

[Tolonath]

stimmt ... ich hab zoom falsch interpretiert.
zoom ist eine classe ... damit 0010
0001 sind die ganzen body, a, div, il etc.

---

hmm ... was das zoom:hover angeht ... ist es nicht 0020 ?
0010 für zoom da es eine class ist und
0010 für :hover ist wie :link
http://de.selfhtml.org/css/formate/kaskade.htm
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm

:link, :visited, :focus, :hover, :active (Pseudoklassen für Verweise und andere Elemente)

:first-child, :first-line, :first-letter (Pseudoklasse und Pseudoelemente für Absätze)

:lang (Pseudoklasse für Sprachauszeichnung)
:before, :after (Pseudoelemente für automatisch generierten Inhalt)

Welchen Wert haben demnach :lang, :before und :after?
Ich schätze mal auch 0001 ... weiss nur nicht wieso *g*

Gruß
Tolonath

[Gunnar Bittersmann]

@@Tolonath:

nuqneH

stimmt ... ich hab zoom falsch interpretiert.
zoom ist eine classe ... damit 0010

Nein, 'zoom' ist ein Elementtypselektor. (Dass es in HTML keinen solchen Elementtypen gibt, ist in CSS nicht relevant.)

Wenn du die Elemente der Klasse "zoom" selektieren willst, dann mit dem Klassenselektor '.zoom'.

hmm ... was das zoom:hover angeht ... ist es nicht 0020 ?

Wenn du '.zoom:hover' meinst, ja.

Welchen Wert haben demnach :lang, :before und :after?
Ich schätze mal auch 0001 ... weiss nur nicht wieso *g*

Verschätzt. :lang ist eine Pseudoklasse. :before und :after sind Pseudoelemente.

In CSS 3 werden Pseudoklassen und Pseudoelemente syntaktisch unterschieden: Pseudoelemente werden mit '::' markiert: ::before, ::after.

Qapla'