CSS: Trotz MediaQueries auf dem Smartphone nicht angepasst?

4 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Hast du vielleicht auf deinem Smartphone Browser die Desktop Ansicht aktiviert?

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Richtig, damit setzt du den "Viewpoint" so, dass das Gerät die Website auf kleinsten Raum "zusammenpresst" und da du Queries benutzt, wird die Seite trotzdem schön angezeigt. Genau das ist ja der Sinn dieser Queries ;-)

Sollte es immer noch nicht gehen - einfach den Code posten!

Ja die Zeile ist mir bekannt.

Mir kamen Fragen auf als ich auf prostudent.de war.

Diese Webseite verkleinert sich entsprechend des Viewports des Browserfensters. Aber auf einem Smartphone sieht sie genauso groß aus wie auf nem Deskop. Was ich nicht so ganz verstand, warum dem so ist.

Oder geht der Browser sonst immer vom Maximal-Wert aus?

Gerade da ich erwartet hätte, dass sie sich via Smartphone doch anpasst.

0

Probier mal das:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Quelle: http://stackoverflow.com/questions/19156510/bootstrap-3-responsive-not-working-on-mobile

Ja die Zeile ist mir bekannt.

Mir kamen Fragen auf als ich auf prostudent.de war.

Diese Webseite verkleinert sich entsprechend des Viewports des Browserfensters. Aber auf einem Smartphone sieht sie genauso groß aus wie auf nem Deskop. Was ich nicht so ganz verstand, warum dem so ist.

Oder geht der Browser sonst immer vom Maximal-Wert aus?

0

Boostrap: Bild über ganze Breite des Browserfensters strecken?

Es ist vielleicht eine dumme Frage, aber ich kriege es nicht hin (kenne mich nicht aus mit Bootstrap):
Man soll ja laut Bootstrap-Anleitung seine Elemente in ein div stecken, das entweder die Klasse "container" oder "container-flui" hat. Ich wollte die Klasse "container" benutzen, weil ich nicht will, dass meine Texte über die ganze Breite gehen, habe aber gleichzeitig ein paar Bilder, die über die gesamte Breite des Browserfenster gehen sollen, was mit "container" aber nicht zu funktionieren scheint. Mit container-fluid schon, aber dann gehen auch die Texte über die ganze Breite. Und den Texten einfach eine max-width und margin: 0 auto zu geben scheint auch nicht zu funktionieren. Noch eine Info: ich habe den Texten und Bildern col-md-12 gegeben.

Kann mir jemand sagen, wie man das macht? (Mit Bootstrap Bilder über die ganze Breite strecken, aber Texte nicht?)

Vielen Dank im Voraus

...zur Frage

CSS display:none; alternative?

Guten Tag Communtiy,

_

Ich habe eine Webseite gebaut (Webserver deshalb kein Link) dabei wollte ich mich mit dem Thema "Responsive Web" auseinander setzen. Die Webseite besteht im Prinzip nur aus einem Video... Meine Vorstellung ist das wenn ich über das Handy auf die Seite zugreife ein Bild angezeigt wird.

Sobald ich mit meinem Handy auf die Seite zugreife wird der style des videos von display:block zu display:none geändert und stattdessen wird ein img angezeigt... Damit nicht so viel Traffic verbraucht wird (nachvollziehbar hoffe ich)..

Doch mir wurde gerade schmerzlich bewusst elemente mit dem style - display:none werden trotzdem geladen.. Also wird das Video ja im Hintergrund geladen.. Wie unterbinde ich das?

http://www.gutefrage.net/frage/css---werden-display-none-elemente-geladen

Nochmal zur strukturierung:

Die Webseite erkennt ob es sich um ein handy handelt.

Wenn es sich um Kein Handy handelt lädt die Seite ganz normal das stylsheet und spielt das Video ab...

Wenn es sich um ein Handy handelt lädt die Seite ein anderes stylsheet indem der style des videos "display:block" zu :none geändert ist. Das video wird also auf dem smartphone nicht angezeigt....

Trotzdem welche andere Lösung gibt es das das Video auf dem Handy nicht im Hintergrund geladen wird?

_

Liebe Grüße! :)

...zur Frage

CSS-Befehl für responsive Design wird einfach ignoriert (webdesign)

Ich habe eine CSS-Datei und in der steht folgender CSS-Befehl:

/* Tablet Layout: 768px */ @media only screen and (min-width: 768px) and (max-width: 960px) { .content p { color:red; } }

Die Webdeveloper-Tools von Chrome zeigen mir beim Einschalten der mobile-Funktion die Schrift in rot, mache ich den Browser schmaler klappt auch alles. Nur das Google-Responsive-Testing-Tool und mein Smartphone machen das aufs Verrecken nicht. Warum? Ich check es nicht..

...zur Frage

Was möchtest Du wissen?