zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden media queries "Anfängerprobleme"

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.06.2012, 15:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.06.2012
Beiträge: 3
supreme befindet sich auf einem aufstrebenden Ast
Standard media queries "Anfängerprobleme"

hallo liebes forum,

ich bin neu hier und habe eine brennende frage auf den lippen welche über das thema "media queries" etwas sagen bzw. fragen möchte.

mein mobiles gerät: samsung galaxy s2 (480x 800)

1) ich habe ein mobiles design einer website vor mir welches in der maximalen höhe 375px hoch ist. mein problem was sich mir nun stellt ist: ich habe dieses design umgesetzt - jedoch scheint das design höher als mein bildschirm zu sein, so 50-60px. woran liegt das? mein samsung s2 hat doch eine höhe von 480px (querformat)!?!?!?

2) welche einstellungen nimmt man für gewöhnlich für eine mobile seite und eine tablet seite!?

3) was hat es mit dem "viewport" auf sich und wann sollte man "width" und wann "width-device-width" nehmen? ich habe schon viele gelesen, aber iwie doch noch nirgends lesen können wann man was nimmt!?

4) wann schreibt man z.B. (achten auf only):

HTML-Code:
<link type="text/css" rel="stylesheet" href="css/_tablet.css" media="[B]only[/B] screen and (min-width:768px)" />
<link type="text/css" rel="stylesheet" href="css/_tablet.css" media="screen and (min-width:768px)" />
ich hoffe ihr könnt mir einige fragen beantworten...würde mich darüber sehr freuen.

liebe grüße
supreme
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.06.2012, 21:34
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Siehe auch Media Queries.

Ob eine Webseite vollständig angezeigt werden kann ist nicht von der Größe des Displays sondern von der Größe des Viewports abhängig.

Wenn die Displaygröße 480x800 lautet, dann musst du davon die Größe der Bedienelemente des Geräts abziehen (etwa Scrollbalken, Adressleiste usw). Was dann übrig bleibt um die Webseite darstellen zu können nennt man Viewport.

Der Viewport ist im Grunde wie ein Fenster in der Wand, du siehst einen Ausschnit von dem, was sich draußen befindet, und je nachdem, wie du dich bewegst (scrollst) siehst du einen anderen Ausschnitt.

device-width und device-height beziehen sich auf die Größe des Displays.
width und height beziehen sich auf die Größe des Viewports, sind also viel interessanter.

Das Schlüsselwort only hat nur eine Funktion: Die Medienabfrage vor Browsern zu verstecken, die Mit MQs nicht umgehen können.
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.06.2012, 22:03
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

device-width kann auch sehr interessant sein, z.B. zum Erkennen von mobilen Ausgabegeräten (iPhone & Co), falls deren gesendeter User Agent geändert wurde, so dass sie nicht mehr als z.B. iPhone erkannt werden (kann z.B. bei Geräten der Fall sein, die Firmen an ihre Mitarbeiter ausgeben).

Oder falls man z.B. keinen (ausreichenden) Zugriff auf den PHP-Code hat und dadurch kein Browser-Sniffing betreiben kann

Diese Erkennung per CSS verträgt sich auch gut mit Desktops, denn selbst das relativ große iPad gibt im Landscape-Modus als device-width nur 768px an (device-width bezieht sich immer auf die Breite in Standard-Ausrichtung, d.h. Portrait).

Auch für spezielle Grafiken (z.B. ein mehr oder eben weniger riesiges body-Hintergrundbild) finde ich device-width passender als width, da width zu ständigem Nachladen neuer Grafiken führen würde, sobald sich die Viewport-Breite entsprechend ändert.

Aber nichtsdestotrotz ist für die meisten Anwendungsfälle tatsächlich width der interessantere Wert.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Antwort

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
Media Queries vs. Extraseite Mr.T CSS 5 07.11.2011 22:58
Helios Media GmbH sucht Frontend-Entwickler (m/w) in Berlin 1000jobboersen Offtopic 0 19.05.2011 11:00
Grafik / Media Tablet... die Qual der Wahl... Rupper Ressourcen 6 18.10.2008 12:20
Queries für verschiedene DBs generieren lassen Schelm.isch Serveradministration und serverseitige Scripte 5 23.06.2008 18:26
frage/Windows Media Player dabidu (X)HTML 3 29.09.2006 16:37


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