Media Queries beim Android Stock-Browser
0 0 0 0 0 0 0 0 0 0 
Matti Mäkitalo
0
0
0 
Gunnar Bittersmann
Media Queries beim Android Stock-Browser
Hallo zusammen,
ich habe eine Seite geschrieben bei der ich versuche mit Hilfe von Media Queries die Stylesheets an die Breite des Browsers anpassen möchte, dazu hab ich in meiner css-Datei folgende Queries:
@media screen and (max-device-width: 920px), screen and (max-width: 920px){
/* ein paar styles */
}
@media screen and (max-device-width: 550px), screen and (max-width: 550px){
/* ein paar andere styles */
}
Die css-Datei hab ich über
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
eingebunden.
Nun ist mein Problem, dass zwar Chrome auf Android die Media Query erkennt, aber den Stock-Browser nicht und ich hätte das als mangelnde Unterstützung interpretiert, wenn der Browser nicht bspw. die Seite von Herrn [url=http://www.stephencaver.com]Stephen Caver[/url] einwandfrei als mobil darstellt. Und so wie ich das gesehen habe ist dort das Vorgehen sehr ähnlich.
Kann mir Jemand sagen wo der Unterschied ist?
Danke
-
Kann mir Jemand sagen wo der Unterschied ist?
Der Android-Standard-Browser verwendet einen virtuellen Viewport - möglicherweise kommt dir der in die Quere.
-
Kann mir Jemand sagen wo der Unterschied ist?
Der Android-Standard-Browser verwendet einen virtuellen Viewport - möglicherweise kommt dir der in die Quere.
Aber warum funktioniert das auf stephencaver.com ?
-
Kann mir Jemand sagen wo der Unterschied ist?
Der Android-Standard-Browser verwendet einen virtuellen Viewport - möglicherweise kommt dir der in die Quere.
Aber warum funktioniert das auf stephencaver.com ?
Möglicherweise daran:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />Layouts für Mobile Endgeräte sind leider PITA - Media Queries hören sich zwar nett an, funktionieren in der Praxis aber nicht, weil ein essentielles Merkmal (eben die definition des virtuellen Viewports) nicht über CSS geschieht sondern über HTML.
-
Möglicherweise daran:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />Das habe ich gerade auch versucht muss es noch eben überprüfen.
Layouts für Mobile Endgeräte sind leider PITA - Media Queries hören sich zwar nett an, funktionieren in der Praxis aber nicht, weil ein essentielles Merkmal (eben die definition des virtuellen Viewports) nicht über CSS geschieht sondern über HTML.
Was heißt denn "funktionieren nicht"? Gibt es nicht zahlreiche Beispiele, die Media Queries nutzen?
Grüße
-
Möglicherweise daran:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Das habe ich gerade auch versucht muss es noch eben überprüfen.Das funktioniert! Danke für die Hilfe.
Grüße
-
Was heißt denn "funktionieren nicht"? Gibt es nicht zahlreiche Beispiele, die Media Queries nutzen?
Mit "funktioniert nicht" meinte ich, dass es nicht so einfach ist, wie es sich anhört, weil es dutzende Fallstricke gibt.
Vor einiger Zeit hab' ich hierzu mal einen Post verfasst:
http://forum.de.selfhtml.org/archiv/2012/7/t210578/#m1435820-
Vor einiger Zeit hab' ich hierzu mal einen Post verfasst:
http://forum.de.selfhtml.org/archiv/2012/7/t210578/#m1435820Wenn ich mir das so durchlese, wäre es dann nicht besser einfach die obige meta-Angabe hinzuzufügen und mit JS die breite des Browsers abzufragen, statt mit Media-Queries, und dann im JS jeweils ein anderes Stylesheet auszuwählen?
Für Leute, die kein JS aktiviert haben ist dann halt nur die Standardseite für große Bildschirme zu sehen.
Grüße
-
Wenn ich mir das so durchlese, wäre es dann nicht besser einfach die obige meta-Angabe hinzuzufügen und mit JS die breite des Browsers abzufragen, statt mit Media-Queries, und dann im JS jeweils ein anderes Stylesheet auszuwählen?
Nein, weil der Viewport dann auf geräten die ein 1:1-Pixel-Verhältnis haben,viel zu groß ist.
Wenn du dich hier einarbeiten willst, empfehle ich dir dich eine Woche intensiv damit zu beschräftigen und ein paar Testgeräte heranzuschaffen.
Ein iPhone 4 oder 4s, ein iPad (2. und 3. generation) und ein paar Android Geräte - ggf. fertigst du dir auch eine Strichliste an, wo du zählst wie oft du dir selbst in den Arsch beissen möchtest :)
Es ist leider kein Triviales unterfangenen alles unter einen Hut zu bekommen.
-
ggf. fertigst du dir auch eine Strichliste an, wo du zählst wie oft du dir selbst in den Arsch beissen möchtest :)
Ich vermute mal, dass das ein sehr guter Tipp ist ^^
Es ist leider kein Triviales unterfangenen alles unter einen Hut zu bekommen.
Höchst ärgerlich sowas. Hat denn niemand Interesse daran Standards für sowas zu schaffen?
-
Hi,
Hat denn niemand Interesse daran Standards für sowas zu schaffen?
Bis die Tage,
Matti -
Hallo!
Es ist leider kein Triviales unterfangenen alles unter einen Hut zu bekommen.
Höchst ärgerlich sowas. Hat denn niemand Interesse daran Standards für sowas zu schaffen?Hier sind wir wieder bei dem (einem der) grundsätzlichen Problem(e), nämlich dass_erst_eine neue "Technik" auf den Markt kommt und erst_dann_angefangen wird, irgendwelche Standards festzulegen (was mitunter so lange dauert, dass sie sich bereits wieder überholt haben, oder unzureichend sind, wenn sie denn jemals wirklich verabschiedet werden).
Die Browser Hersteller sahen sich bei den mobilen Endgeräten vor dem Problem, dass ja irgendwie alle bereits existierenden Websites angezeigt werden müssen. Also haben sie eine Reihe von "Automatissmen" in die mobile Versionen ihrer Browser eingebaut, die dies ermöglichen.
Dabei imho allerdings weitestgehend außer Acht gelassen, welche Nebenwirkungen diese haben, bzw. wie diese ggf. umgehen/ ausschalten kann. Ganz zu schweigen davon, dass sich dieses auch noch irgendwie im Einklang mit den bereits vorhandenen Standards, bzw. deren grundlegenden Konzepten erreichen ließe ...!
Und wenn wir Pech haben, entwickelt sich der Zwist zwischen Apple - Google, iOS - Android, Chrome - Safari noch zu dem, was wir schon mal mit IE - Netscape hatten ...!
Die "Lernfähigkeit" solcher Unternehmen/Menschen scheint sehr begrenzt zu sein - hat man jedenfalls manchmal den Eindruck.
Gruß Gunther
-
-
Wie sieht es mit Literatur zu dem Thema aus?
Was ist hiermit?-
Wie sieht es mit Literatur zu dem Thema aus?
Was ist hiermit?Und dieses Buch erspart dir Praxistests am lebenden Objekt? :D
-
-
-
-
-
@@cOm:
nuqneH
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Das habe ich gerade auch versucht muss es noch eben überprüfen.Dem Nutzer die Möglichkeit zu nehmen zu skalieren, dürfte in den wenigsten Fällen eine gute Idee sein.
Qapla'
--
Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
-
-
-
-