zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Layout für jedes Handy

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.09.2014, 13:05
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.11.2012
Beiträge: 45
wrestler befindet sich auf einem aufstrebenden Ast
Standard Layout für jedes Handy

Hallo zusammen

Ich habe festgestellt, dass mein responsive CSS je nach Handytyp unterschiedlich reagiert.

work | 2LB
Auf dem iPhone 5 ist das Layout zweispaltig, auf dem Samsung Galaxy 3 nur einspaltig.

Wie gehe ich da am besten vor, dass es auf allen mobilen Geräten zweispaltig funktioniert?

Danke im Voraus!
Wrestler
Angehängte Grafiken
Dateityp: jpg samsung.JPG (99,8 KB, 11x aufgerufen)
Dateityp: jpg iphone.jpg (67,5 KB, 7x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.09.2014, 13:55
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.074
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Auf deinem ersten Screenshot ist auch kein Platz für eine zweite Spalte, insofern verstehe ich dein Problem nicht? Responsive heißt ja, dass es sich anpasst. Und das tut dein Layout.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.09.2014, 21:04
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.11.2012
Beiträge: 45
wrestler befindet sich auf einem aufstrebenden Ast
Standard

Meine Frage ist:

Wie gehe ich da am besten vor, dass es auf allen mobilen Geräten zweispaltig funktioniert?

Muss man für jeden Handytyp ein spezielles CSS schreiben, oder gibt es allgemeingültige Lösung?
Mit Zitat antworten
  #4 (permalink)  
Alt 18.09.2014, 22:22
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von wrestler Beitrag anzeigen
Auf dem iPhone 5 ist das Layout zweispaltig, auf dem Samsung Galaxy 3 nur einspaltig.
Ich habe mal bei mir auf meinem iPhone 4 S getestet.

Ja es wird zweispaltig angezeigt, aber wechsel ich zu Ansicht Querformat und wieder zurück Dan nur einspaltig.
Wie auf dem Bild von dir.

Oder ich muss neu Aktualisieren.

____________
MfG Roland

Geändert von K.Roland (19.09.2014 um 00:21 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 19.09.2014, 08:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.074
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Zitat:
Zitat von wrestler Beitrag anzeigen
Meine Frage ist:

Wie gehe ich da am besten vor, dass es auf allen mobilen Geräten zweispaltig funktioniert?

Muss man für jeden Handytyp ein spezielles CSS schreiben, oder gibt es allgemeingültige Lösung?
Eine zwar blöde, aber richtige Antwort:
Indem du dich mit responsive Webdesign auseinandersetzt.
Du gibst einfach deinen Artikel 50% Breite, dann passt es immer, dass sich 2 nebeneinander ausgehen. Auch auf Handys, die nur 200px in der Breite Platz haben. Ob das sinnvoll ist, sei mal dahingestellt (Das hat dann ja wieder was mit responsive Webdesign zu tun)
Mit Zitat antworten
  #6 (permalink)  
Alt 03.10.2014, 13:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.11.2012
Beiträge: 45
wrestler befindet sich auf einem aufstrebenden Ast
Standard

Es geht nicht um responsiv hier. Das funktioniert soweit schon.
Das Problem ist, dass auf unterschiedlichen Handys zwei oder eben nur eine Spalte dargestellt werden.

Mit Prozentwerten funktioniert es leider auch nicht.
Mit Zitat antworten
  #7 (permalink)  
Alt 05.10.2014, 18:27
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von wrestler Beitrag anzeigen
Das Problem ist, dass auf unterschiedlichen Handys zwei oder eben nur eine Spalte dargestellt werden.
Ja, weil Dan der Platz nicht ausreicht, der endet für zwei Spalten ab einer weite bei 319 Pixel.
Siehe selbst: im Firefox Strg + Shift + M,

Bedenke auch längere Wörter wie zum Beispiel Glückswunschkarte, passt auch nicht bei 150 Pixel.
HTML-Code:
<a href="/work/gl%C3%BCckswunschkarte-hochzeit">Glückswunschkarte (Hochzeit)</a>
Und bei Media Queries auch nur das hinzufügen, was man auch verändern möchte.

Hier mal doppeltes Unnötiges entfernen.
Code:
}
#isotope-container { 
    padding: 0 10px; 
}
.isotope-element {
    background: none repeat scroll 0 0 #bebebe;
    color: #fff;
    float: left;
    height: 150px;
    margin: 10px;
    overflow: hidden;
    position: relative;
    width: 150px;
}
.isotope-element img {
    margin: 0 auto;
    text-align: center;
    width: 150px;
}
#isotope-container .isotope-element {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
    height: auto;
    margin: 0 10px 10px 0;
    transition-property: all;
    width: 200px;
}
@media only screen and (max-width: 560px) {
#isotope-container .isotope-element {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
    float: left !important;
    height: auto;
    margin: 0 10px 10px 0;
    transition-property: all;
    width: 140px;
}
#isotope-container .isotope-element IMG {
    width: 140px;
}
}
_____________
MfG Roland
Mit Zitat antworten
  #8 (permalink)  
Alt 05.10.2014, 21:06
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.378
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von wrestler Beitrag anzeigen
Es geht nicht um responsiv hier. Das funktioniert soweit schon.
Das Problem ist, dass auf unterschiedlichen Handys zwei oder eben nur eine Spalte dargestellt werden.

Mit Prozentwerten funktioniert es leider auch nicht.
Ersetze das "unterschiedliche Handys" durch "unterschiedliche Viewportbreiten"

aber hey, das hat nichts mit responsive zu tun... überhaupt nicht....
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
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
Was bevorzugt ihr - fixes, fluides oder elastisches Layout mimii CSS 0 19.12.2011 21:12
Bitte um Hilfe - CSS und Prozentangaben sprefer CSS 3 01.03.2011 05:11
Untermenü im IE nici CSS 10 22.06.2009 22:19
Probleme mit Layout kruemelchen26 CSS 0 15.05.2007 23:40
Firefox 2 "zerhackt" Layout Pino CSS 3 18.02.2007 13:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:10 Uhr.