nicht angemeldet Der-Dennis
Der-Dennis
Auge
Auge
Auge
Tabellenkalk
JürgenB
JürgenB
JürgenB
Gunnar Bittersmann
Auge
Auge
Gunnar Bittersmann
Hallo,
ich habe nochmals eine Frage zu dem Viewport.
Ich habe nun eine Mobile-Webseite erstellt, die eine Breite von 520 px hat. Die Webseite für Tablets hat eine BReite von 900px.
Nun würde in in den Meta festlegen - viewport=520 ALlerdings ist nun die Tablet-Version auch nur 520px breit.
Nun meine Frage - wie kann ich hier unterscheiden, zwischen Handy und Tablet, denn eigentlich bäruchte ich zwei Viewports
viewport=520 - für Handy viewport=900 - für Tablet
In den Media-Querys kann ich es ja nicht reinschreiben - oder?
Hallo mixmastertobsi,
Nun meine Frage - wie kann ich hier unterscheiden, zwischen Handy und Tablet, denn eigentlich bäruchte ich zwei Viewports
viewport=520 - für Handy viewport=900 - für Tablet
In den Media-Querys kann ich es ja nicht reinschreiben - oder?
Du kannst auch mehrere Media Queries verwenden. Z.B. eine für device-width < 520, eine für device-with zwischen 520 und 900 und eine für über 900. Eine direkte Unterscheidung zwischen Handy und Tablet ist nicht wirklich möglich, wäre aber auch nicht sinnvoll.
Gruß Dennis
Hallo mixmastertobsi,
Nun meine Frage - wie kann ich hier unterscheiden, zwischen Handy und Tablet, denn eigentlich bäruchte ich zwei Viewports
viewport=520 - für Handy viewport=900 - für Tablet
In den Media-Querys kann ich es ja nicht reinschreiben - oder?
Du kannst auch mehrere Media Queries verwenden. Z.B. eine für device-width < 520, eine für device-with zwischen 520 und 900 und eine für über 900. Eine direkte Unterscheidung zwischen Handy und Tablet ist nicht wirklich möglich, wäre aber auch nicht sinnvoll.
Hallo,
ich mache mal ein Beispiel - die Seite ist auf 520 px optimiert. Nun hat das Handy aber nur eine Auflösung von 400px. Sinnvoll wäre nun, wenn das Handy die Breite auf 520px anpasst - aber wie?
Gruß Dennis
Hallo mixmastertobsi,
ich mache mal ein Beispiel - die Seite ist auf 520 px optimiert. Nun hat das Handy aber nur eine Auflösung von 400px. Sinnvoll wäre nun, wenn das Handy die Breite auf 520px anpasst - aber wie?
hast Du die 520px irgendwo fest angegeben? Wenn nicht sollte die Seite doch "automatisch angepasst" werden. Bei so geringen Breiten nimmt ein Element ja meistens die gesamte Breite ein. Ansonsten: Kennst Du Flexbox? Hast Du Dir schon mal das Tutorial "flexibles Layout" im Wiki angesehen?
Gruß Dennis
Hallo mixmastertobsi,
ich mache mal ein Beispiel - die Seite ist auf 520 px optimiert. Nun hat das Handy aber nur eine Auflösung von 400px. Sinnvoll wäre nun, wenn das Handy die Breite auf 520px anpasst - aber wie?
hast Du die 520px irgendwo fest angegeben? Wenn nicht sollte die Seite doch "automatisch angepasst" werden. Bei so geringen Breiten nimmt ein Element ja meistens die gesamte Breite ein. Ansonsten: Kennst Du Flexbox? Hast Du Dir schon mal das Tutorial "flexibles Layout" im Wiki angesehen?
Gruß Dennis
Ja - die 520px sind fix. Die CSS-Grafiken habe ja auch eine feste Breite und ich kann ich nicht mit Prozent arbeiten. Ich möchte, dass die mobile Webseite eine BReite von 520 px hat und das Handy entpsrecht auf 520px skaliert, so dass alles sichtbar ist.
Hallo
Ja - die 520px sind fix. Die CSS-Grafiken habe ja auch eine feste Breite und ich kann ich nicht mit Prozent arbeiten.
Warum nicht? CSS-Grafiken (Hintergrundbilder) lassen sich skalieren, was so ziemlich überall zuverlässig funktioniert.
Ich würde diesen Mehraufwand in Kauf nehmen, um den anderen loszuwerden.
Tschö, Auge
Hallo
ich mache mal ein Beispiel - die Seite ist auf 520 px optimiert.
Also gegen alles andere.
Nun hat das Handy aber nur eine Auflösung von 400px.
Schon Scheiße, oder? ;-)
Sinnvoll wäre nun, wenn das Handy die Breite auf 520px anpasst - aber wie?
Du kannst natürlich eine Breite von 520px vorschreiben. Damit zwingst du den Nutzer aber zum querscrollen, wenn das nicht genau passt. Das ist kein Weltuntergang, aber ärgerlich. Ich an deiner Stelle würde die Mediaqueries und die Größenangaben mit relativen Einheiten festlegen. Damit ergeben sich pro Media-Query-Abschnitt recht einheitliche Proportionen in Aufteilung und (Schrift-)Größen der Seite. Kleinere Abweichungen darfst du gerne vernachlässigen.
Tschö, Auge
Warum sollte er denn dann querscrollen müssen, wenn der Browser auf eine Breite von 520px anpasst/zoomt.
Hallo
Warum sollte er denn dann querscrollen müssen, wenn der Browser auf eine Breite von 520px anpasst/zoomt.
Kannst du das sicherstellen? Wenn der Browser nicht zoomt, und die Viewportbreite <520px ist, dann muss der Benutzer scrollen, sollte der Inhalt breiter sein, als der Viewport (es könnte ja auch breite Freiflächen geben).
Tschö, Auge
Kannst du das sicherstellen? Wenn der Browser nicht zoomt, und die Viewportbreite <520px ist, dann muss der Benutzer scrollen, sollte der Inhalt breiter sein, als der Viewport (es könnte ja auch breite Freiflächen geben).
OK - vielleicht verstehe ich es doch noch.
Ich habe eine Breite von 100% und möchte dies in drei gleiche Spalten aufteilen. Nun könnte ich theoretisch sagen, jedes Element ist 33% breit, allerdings möchte ich zwischen den Elementen einen Abstand mit 15px, weshalb es schon wieder Probleme gibt...oder wie löse ich das?
Hallo,
zwischen den Elementen einen Abstand mit 15px, weshalb es schon wieder Probleme gibt...oder wie löse ich das?
mit dem richtigen Box-Modell.
Gruß
Kalk
Hallo Tabellenkalk,
zwischen den Elementen einen Abstand mit 15px, weshalb es schon wieder Probleme gibt...oder wie löse ich das?
mit dem richtigen Box-Modell.
box-sizing:border-box/box-sizing:padding-box bezieht sich nicht auf margins. Man müsste also wieder sinnlose Container-Elemente einführen - oder eben prozentuale Abstände nutzen.
LG,
CK
Hallo Tabellenkalk,
zwischen den Elementen einen Abstand mit 15px, weshalb es schon wieder Probleme gibt...oder wie löse ich das?
mit dem richtigen Box-Modell.
box-sizing:border-box/box-sizing:padding-boxbezieht sich nicht auf margins. Man müsste also wieder sinnlose Container-Elemente einführen - oder eben prozentuale Abstände nutzen.
OK Danke! Nun noch eine Frage - wie kann ich die Höhe abhängig von der Breite machen...
Aktuell hat zum Beispiel mein Container eine Höhe von 300px. Wenn nun aber der Container nur noch 30% breit sein darf, sollte ich auch die Höhe prozentual verschieben.
Hallo,
OK Danke! Nun noch eine Frage - wie kann ich die Höhe abhängig von der Breite machen...
Aktuell hat zum Beispiel mein Container eine Höhe von 300px. Wenn nun aber der Container nur noch 30% breit sein darf, sollte ich auch die Höhe prozentual verschieben.
Musst du die denn vorgeben? Lass das doch den Browser entscheiden, dann ist das abhängig vom Inhalt, dessen Größe kann abhängig von User-Einstellungen schwanken.
Gruß
Kalk
Hallo,
OK Danke! Nun noch eine Frage - wie kann ich die Höhe abhängig von der Breite machen...
Aktuell hat zum Beispiel mein Container eine Höhe von 300px. Wenn nun aber der Container nur noch 30% breit sein darf, sollte ich auch die Höhe prozentual verschieben.
Musst du die denn vorgeben? Lass das doch den Browser entscheiden, dann ist das abhängig vom Inhalt, dessen Größe kann abhängig von User-Einstellungen schwanken.
Gruß
Kalk
Wenn die ELemente unterschiedlich hoch sind, sind das nicht schön aus. Das Bild sollte gleichmäßig sein... Gibt es hier eine Möglichkeit?
@@mixmastertobsi
Wenn die ELemente unterschiedlich hoch sind, sind das nicht schön aus.
Dann mach sie doch gleich hoch.
Gibt es hier eine Möglichkeit?
Ja, Flexbox.
LLAP
Ja, Flexbox.
Ich sehe gerade - Flexbox wird erst am IE11 vollständig unterstützt. Ich finde diese Löung daher nicht so ideal...
http://caniuse.com/#feat=flexbox
@@mixmastertobsi
Ich sehe gerade - Flexbox wird erst am IE11 vollständig unterstützt.
Boxen dieselbe Höhe zu verpassen sollte auch der IE10 mit seiner unvollständigen Unterstützung von Flexbox hinbekommen.
In alten Browsern haben die Boxen halt unterschiedliche Höhen – na und?
Ich finde diese Löung daher nicht so ideal...
Ich schon. Sie funktioniert in der überwältigenden Mehrheit der Browser. Für die kümmerlichen Rest muss man abwägen, ob die Implementierung eines Polyfills in gesunder Aufwand-Nutzen-Relation steht. Wenn die Antwort „ja“ ist, sollte man überdenken, ob mit seiner Work-Life-Balance alles in Ordnung ist.
LLAP
@@mixmastertobsi
Wenn die ELemente unterschiedlich hoch sind, sind das nicht schön aus. Das Bild sollte gleichmäßig sein...
Live: Dave Shea (ihr erinnert euch an seinen CSS Zen Garden?), beyond tellerrand
LLAP
Hallo Christian,
box-sizing:border-box/box-sizing:padding-boxbezieht sich nicht auf margins. Man müsste also wieder sinnlose Container-Elemente einführen - oder eben prozentuale Abstände nutzen.
was spricht gegen calc?
Gruß Jürgen
Hallo JürgenB,
box-sizing:border-box/box-sizing:padding-boxbezieht sich nicht auf margins. Man müsste also wieder sinnlose Container-Elemente einführen - oder eben prozentuale Abstände nutzen.was spricht gegen
calc?
Stimmt, daran hatte ich gar nicht gedacht. Im Prinzip nichts. Muss man halt wissen, ob man IE9 noch unterstützen will oder nicht.
LG,
CK
Hallo
was spricht gegen
calc?Stimmt, daran hatte ich gar nicht gedacht. Im Prinzip nichts. Muss man halt wissen, ob man IE9 noch unterstützen will oder nicht.
ich setze zuerst eine geschätzte Größe in % oder px (u.A.für mein altes Windows Phone :) ), und berechne danach die die wirklich gewünschte Größe mit calc:
width: 95%; width:calc(100% - 42px)
Gruß Jürgen
Hallo
was spricht gegen
calc?Stimmt, daran hatte ich gar nicht gedacht. Im Prinzip nichts. Muss man halt wissen, ob man IE9 noch unterstützen will oder nicht.
ich setze zuerst eine geschätzte Größe in % oder px (u.A.für mein altes Windows Phone :) ), und berechne danach die die wirklich gewünschte Größe mit calc:
width: 95%; width:calc(100% - 42px)
Hallo, und was ist besser - calc oder box-sizing?
Hallo
und was ist besser - calc oder box-sizing?
ich übertrage deine Frage mal:
Was ist besser? Sprudel oder 3 Liter?
Die Frage müsste aber lauten:
„Sprudel oder Wasser?“ oder „3 Liter pauschal oder Nachsehen, was gebraucht wird?“
box-sizing gibt das Berechnungsmodell an, calc berechnet die Größe, also z.B. 100% minus Rand
Gruß Jürgen
@@Christian Kruse
Muss man halt wissen, ob man IE9 noch unterstützen will oder nicht.
Natürlich will man den noch unterstützen. Wie auch IE8. Und 7. Und 4. Und Netscape 3, wie Jeremy Keith gestern sagte. Du hättest herkommen sollen.
LLAP
Hallo Gunnar,
Muss man halt wissen, ob man IE9 noch unterstützen will oder nicht.
Natürlich will man den noch unterstützen. Wie auch IE8. Und 7. Und 4. Und Netscape 3, wie Jeremy Keith gestern sagte. Du hättest herkommen sollen.
gähn
Du weisst genau, was gemeint ist.
LG,
CK
Hallo
Kannst du das sicherstellen? Wenn der Browser nicht zoomt, und die Viewportbreite <520px ist, dann muss der Benutzer scrollen, sollte der Inhalt breiter sein, als der Viewport (es könnte ja auch breite Freiflächen geben).
OK - vielleicht verstehe ich es doch noch.
Ich habe eine Breite von 100% und möchte dies in drei gleiche Spalten aufteilen. Nun könnte ich theoretisch sagen, jedes Element ist 33% breit, allerdings möchte ich zwischen den Elementen einen Abstand mit 15px, weshalb es schon wieder Probleme gibt...oder wie löse ich das?
Wenn du eine überschaubare und immer gleich bleibende Anzahl von Boxen bzw. Spalten hast, bietet sich calc als Lösung an. DIe Browserunterstützung ist ausreichend. Bitte beachte, zwischen die Werte und Operationszeichen Leerzeichen zu setzen. Bei Multiplikation und Division (die du eher seltenst brauchen wirst) kannst du die zwar weglassen, bei Addition und Subtraktion Addition und Subtraktion sind sie aber – im Gegensatz dazu und aus für mich nicht nachvollziehbaren Gründen – vorgeschrieben.
Bei veränderlicher Anzahl von Spalten kannst du zwar mit Klassen herumhantieren, aber das wird schnell unübersichtlich. Das richtige™ Boxmodell zu verwenden bleibt davon unbelassen.
Tschö, Auge
... Ich an deiner Stelle würde die Mediaqueries und die Größenangaben mit relativen Einheiten festlegen. Damit ergeben sich pro Media-Query-Abschnitt recht einheitliche Proportionen in Aufteilung und (Schrift-)Größen der Seite. Kleinere Abweichungen darfst du gerne vernachlässigen.
Tschö, Auge
Ich bin anders an das Problem herangegangen:
Ich habe mir eine Tabelle geschrieben (außerhalb von HTML), in der ich die Größen der verschiedenen Geräte notiert habe. Die Größen habe ich durch die Seite http://www.responsive.cc/ herausgefunden. Dann nahm ich einen Wert jeweils unterhalb einer Gruppe von Geräten (z.B. Smartphones in vertikaler Ausrichtung / in horizontaler Ausrichtung u.s.w.) und stellte so eine stylesheet.css her (in denen jeweils die unveränderlichen Angaben stehen) und eine Reihe von @importierte CSS-Seiten für die veränderlichen Angaben. Ist a bissle Arbeit, aber die Größen sind dann für jedes folgende Webprojekt gleich.
cu Rawir
Hallo
In den Media-Querys kann ich es ja nicht reinschreiben - oder?
Du kannst auch mehrere Media Queries verwenden. Z.B. eine für device-width < 520, eine für device-with zwischen 520 und 900 und eine für über 900.
Das ist so nicht ganz ideal. Die Aufzählung „<520px“, „520px-900px“ und „>900px“ fällt auseinander, wenn der TO irgendwann mal auf jemanden hört, der z.B. die Einheit „em“ statt „px“ empfiehlt. Glaube mir, so jemand wird kommen (und er wird mMn recht haben). Dann ergeben sich nämlich, selbst mit Nachkommastellen im Wert, Lücken. Zudem ist die Logik inkonsistent.
Besser™ ist es, nach der Logik „Mobile first“ zu verfahren. Dabei werden zuerst die Regeln für schmale Viewports ohne Media-Query notiert. Mit Media-Queries für breitere Viewports werden diese Regeln ergänzt und überschrieben.
body {
color: #000;
}
@media screen and (min-width: 36em) {
body {
color: #048;
}
@media screen and (min-width: 56em) {
body {
color: #c20;
}
Das hat den Vorteil, nur in eine Richtung (Mindestbreite) Vorgaben für die Anwendung der Regeln zu machen. Kein „von bis“, nur ein „ab“. Das kann man, wie im Beispielcode zu sehen, mehrfach überschreiben.
Tschö, Auge
Hallo Auge,
Besser™ ist es, nach der Logik „Mobile first“ zu verfahren. Dabei werden zuerst die Regeln für schmale Viewports ohne Media-Query notiert. Mit Media-Queries für breitere Viewports werden diese Regeln ergänzt und überschrieben.
vollkommen korrekt. Wollte ich auch so verstanden wissen, "von ... bis" war da natürlich missverständlich bzw. völlig falsch beschrieben. Danke für die Ergänzung, gibt nen "Daumen hoch".
Gruß Dennis
@@mixmastertobsi
Ich habe nun eine Mobile-Webseite erstellt,
Hast du? Was soll das sein, eine „Mobile-Webseite“?
die eine Breite von 520 px hat.
Du hast keine Webseite erstellt. Webseiten haben keine in Pixel festgemeißelte Breiten.
viewport=520 - für Handy viewport=900 - für Tablet
Die Unterscheidung nach Geräteklassen war noch nie sinnvoll. Heutzutage ist sie es erst recht nicht; es gibt große Handys und kleine Tablets und einen fließenden Übergang (Phablets).
LLAP
Hallo
Ich habe nun eine Mobile-Webseite erstellt,
Hast du? Was soll das sein, eine „Mobile-Webseite“?
Jaja, der ewig gleiche Link. Aus dem Fenster schauend und deine Umwelt wahrnehmend, wüsstest du, dass man, wenn man den offensichtlichen Rechtschreibfehler erkennt, auch eine Mobilee-Website haben kann.
Tschö, Auge
@@Auge
Du darfst auch gerne mal über den Tellerrand schauen
LOL. Was denkst du, was ich gerade mache?
„Ebb and flow“ von ebenda.
LLAP