zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Weiche für iPhone und co. + richtig testen?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.01.2012, 19:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.01.2012
Ort: Thüringen
Beiträge: 10
Tony-S befindet sich auf einem aufstrebenden Ast
Standard Weiche für iPhone und co. + richtig testen?

Hallo Forum,

ich habe jetzt schon ein wenig mit CSS rumprobiert und geübt und wollte nun mal auf meinem iPhone testen, die CSS die ich dazu geschrieben habe greift auch ganz gut aber immer die Datei auf meinen Webspace laden und am iPhone aktualisieren nervt. Deswegen hab ich mir diese Chrome-Extension geladen:
http://goo.gl/hUrx5 sie ändert eben die Größe des Fenster, doch wenn ich diese auf die iPhone 4 Auflösung stelle (960 x 640, bzw. irgend etwas dazwischen) und aufrufe, greift der entsprechende CSS-Teil nicht.

Code:
body {
  margin: 0px;
  background-color: black;
}

p {
  font-size: 22px;
  font-weight: bold;
  margin: 0px;
}

#top-menu {
  width: 100%;
  height: 120px;
  
  position: relative;
}

.le-button {
  width: 250px;
  height: 110px;
  border-radius: 5px;
    
  background-color: red;
  
  margin-top: 5px;
  margin-right: 5px;
  margin-left: auto;
  float: right;
}

 
@media only screen and (min-device-width: 320px) and (max-device-width: 639px) {
  /* Hier der CSS Code für Smartphones wie z.B. iPhone, Android, WebOS, Windows Phone 7 Geräte o.Ä. */

  #top-menu {  
    background-color: yellow;
  }
}
 
/* Computer und Tablet CSS */
@media only screen and (min-device-width: 800px) {
  /* Hier der CSS-Code für Tablets und Computer ab einer mindest Bildschirm Weite von 800 Pixeln */

  #top-menu {
    background-color: orange;
  }
}
und noch die html:

HTML-Code:
<!DOCTYPE html>
<html>
  <head>
    <title>myPlace</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
	
  <body>
    <div id="top-menu">
      <div class="le-button"></div>
    </div>
  </body>
</html>
Die Frage ist jetzt was ich den falsch mache und wie man so etwas besser testen kann (wenns geht ohne irgendwelche Tools).

Wer es mal selbst probieren möchte:

http://http://goo.gl/ZyIYS

Vielen Dank schon mal für eure Tipps

Geändert von Tony-S (10.01.2012 um 12:57 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.01.2012, 19:59
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Nimm nicht min-device-width für die Media-Queries, sondern min-width. Du willst doch nicht nur Geräte ansprechen, sondern (auch) Viewportgrößen (das ist etwas anderes als eine Bildschirmgröße).
Das dann noch mit dem Viewport-Meta-Element kombinieren.
Combining meta viewport and media queries - QuirksBlog
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.01.2012, 21:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.01.2012
Ort: Thüringen
Beiträge: 10
Tony-S befindet sich auf einem aufstrebenden Ast
Standard

Danke das klappt, auch mit dem resizen - aufm iPhone schauts zwar jetzt bissl riesig aus aber warum find ich auch noch heraus

Der Artikel ist übrigens auch gut, den arbeite ich morgen mal durch.
Mit Zitat antworten
Antwort

Stichwörter
css, handy, iphone, smartphone

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
iPhone Navigation - neues Vergleichsportal jetzt testen mk-gfx Site- und Layoutcheck 1 01.08.2009 23:59
Ajax Formular mit Weiche? Zen5656 Javascript & Ajax 7 04.10.2007 18:28
Grafik richtig positionieren?! Pumpkin CSS 7 13.06.2007 23:43
Testen per Browsercam NinaG Barrierefreiheit 0 17.10.2006 12:59
IE zeigt falsch, FF richtig - change - FF zeigts falsch, IE richtig nick CSS 6 19.08.2006 03:02


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:29 Uhr.