Website-Anzeige auf Tablets fehlerhaft

aileen · 13. Dezember 2017

Hallo,

ich habe vor einiger Zeit angefangen, mir meine eigene Portfolio-Website zu erstellen und leider noch sehr wenig Erfahrung.

Ich habe auf meiner website (http://www.aileenkassing.com) vier "Blöcke" (Bilder) nebeneinander, die zu verschiedenen anderen Seiten leiten. Diese sollen auf einem großen/"normalen" Bildschirm nebeneinander angezeigt werden (auf Tablets die eine hohe Auflösung haben wir z.B. auf den neuen iPad Pros, ebenfalls). Auf anderen Tablets mit einer geringeren Auflösung soll es zweispaltig werden (also zwei Bilder nebeneinander und dann die anderen gleichmäßig darunter) und auf dem Handy sollen sie dann alle untereinander sein (also ein Bild pro "Reihe").

Wenn ich meine website auf "normalen", hochauflösenden Bildschirmen lade, wird alles so anzeigt, wie es soll. Auf Handys ebenfalls.

Nur bei Tablets habe ich ein Problem. Hochkant wird nur ein Bild pro Reihe angezeigt, wenn man es quer hält zwei. Dabei müssten hochkant auch mindestens zwei angezeigt werden und quer bei den meisten Tablets eher 4. Das iPad Pro, mit dem ich teste, hat eine höhere Auflösung als der Bildschirm meines Computers und trotzdem sehe ich auf meinem Computer 4 Spalten nebeneinander und auf dem iPad nur eine bzw. zwei, je nach dem wie ich es halte... Das kann doch eigentlich gar nicht sein?!

Hier mein Code:

Code

/*Smartphone*/


@media (min-width: 1px){


body {
max-width: 90%;
}


.style-nav ul li {
display: inline-block;
font-size: 1.8em;
}


.style-nav ul {
text-align: center;
}

.col {
float: left;
padding: 0px 14px 14px;


}
}

/*Tablet*/


@media (min-width: 1000px){


body {
max-width: 778px;
}


.style-nav ul li {
display: inline-block;
font-size: 1.3em;
}


.style-nav ul {
text-align: center;
}

.col-md-one-half {
width: 50%;
}


}


/*Desktop*/


@media (min-width: 1080px){


body {
max-width: 1000px;
}


.style-logo {
float: left;
}


.style-nav {
float: right;
}



.col-lg-one-third {
float: left;
padding: 10px 10px 10px 5px;
width: 33.333333%;
}


.col-lg-one-fourth {
width: 25%;
}

}

Alles anzeigen

Die Angaben unter "min-width" und "max-width" machen überhaupt keinen Sinn mehr, aber ich habe schon sehr viel damit rumgespielt und hatte so die besten Ergebnisse (leider...).

Ich glaube, ich bin gerade einfach blind und sehe irgendeinen offensichtlichen Fehler nicht.

Kann mir jemand helfen?

Vielen Dank!
Aileen

JR Cologne · 13. Dezember 2017

Das Tablet hat für CSS eben keine größere Auflösung als der PC.

Das liegt an den CSS Pixeln, welche bei Tablets, Smartphones etc. von der eigentlichen Geräteauflösung abweichen.

Hier kannst du die Werte für die verschiedenen Geräte einsehen:

https://mydevice.io/devices/#sortTablets

Das, was du bei den Media Queries eingeben musst, orientiert sich also an den CSS Pixeln, nicht der Geräteauflösung.

basti1012 · 13. Dezember 2017

und ich würde vieleicht mit prozenten arbeiten, könnte mir vorstellen das es damit auch besser ist als pixels.

aber ist mein gedanke ,der zählt nicht so,liege meist falsch

JR Cologne · 13. Dezember 2017

Du meinst für die Breiten-Angaben usw.? Ja, im Responsive Webdesign ist Prozent definitiv eine gute Idee.

Wichtig: Bei den Media-Query-Angaben natürlich bei Pixeln bleiben. Nicht, dass der TO das falsch verstehst.

aileen · 13. Dezember 2017

Interessant, über die CSS pixel wusste ich noch nichts.

Da Handys anscheinend ja auch auf CSS-Pixeln basieren, kann ich einfach viel kleinere Zahlen nehmen und dann müsste es passen. Ich werde es mal ausprobieren, vielen Dank!

Und ja, ich muss mich an Prozent gewöhnen

JR Cologne · 13. Dezember 2017

Ohne CSS Pixel wäre es sonst schon gar nicht mehr möglich, ohne Weiteres zwischen Desktop und Smartphone zu unterscheiden, da die Geräteauflösung bei Smartphones mittlerweile auch im Desktop-Bereich angekommen ist.

Full HD ist schließlich bei Smartphones auch schon Standard.

derneue2017 · 14. Dezember 2017

Und wenn man in Zentimeter rechnet kommt nur noch Müll raus

aileen · 14. Dezember 2017

Ich habe meinen Code inzwischen angepasst, aber leider ist mein Problem noch nicht behoben.

Wenn ich meine Seite auf http://www.responsive.cc checke (diverse Smartphones & Tablets), sieht alles so aus wie es soll.

Öffne ich meine website (aileenkassing.com) allerdings auf einem richtigen Mobilgerät, also z.B. auf meinem Handy oder einem iPad, wird immer der zweispaltige Tabletmodus angezeigt -sowohl auf dem neusten iPad Pro als auch auf meinem Samsung Galaxy A6. Auf einem großen Bildschirm (PC) passt alles.

Weiß jemand, woran das liegt?

Mein aktueller Code:

Code

/*Smartphone*/@media (min-width: 1px){body {max-width: 90%;}.style-nav ul li {display: inline-block;font-size: 1em;}.style-nav ul {text-align: center;}.col {float: left;padding: 0px 14px 14px;}}/*Tablet*/@media (min-width: 600px){body {max-width: 90%;}.style-nav ul li {display: inline-block;font-size: 1em;}.style-nav ul {text-align: center;}.col-md-one-half {width: 50%;}}/*Desktop*/@media (min-width: 1020px){body {max-width: 1000px;}.style-logo {float: left;}.style-nav {float: right;}.col-lg-one-third {float: left;padding: 10px 10px 10px 5px;width: 33.333333%;}.col-lg-one-fourth {width: 25%;}}

bzw. falls der Fehler irgendwo anders liegen kann, hier mein gesamtes CSS:

Code

@charset "UTF-8";
/* CSS Document */


html,
html * {
padding: 0;
margin: 0;
box-sizing: border-box;


}


header {
padding: 50px 0px 50px 0px;
}


img {
width: 100%;
max-width: 100%;
height: auto;
vertical-align: middle;
}

footer {
padding: 80px 30px 0px 0px;
background-color: #ffffff;
}


body {
margin-left: auto;
margin-right: auto;
background: #ffffff;
}

h1, h2, h3, h4, h5, h6 	{font-family: "Raleway", sans-serif;
text-transform: none;
font-weight:600;}


h1 {font-size: 3em;}
h2 {font-size: 2em;}
h3 {font-size: 1.4em;}
h4 {font-size: 1.2em;}
h5 {font-size: 0.8em;}

a 			{text-decoration: none;
color:#000000;}
a:hover 	{text-decoration: none;
color:#000000;}
a:active 	{text-decoration: none;
color:#000000;}
a:visited 	{text-decoration: none;
color:#000000;}
a:visited   {text-decoration: none;
color:#000000;}


p.overview {
text-transform: uppercase;
margin-top:1em;
font-weight:600;
}


p.megaheadline {
font-family: 'Nunito', sans-serif;
margin-bottom:0.1em;
text-transform: uppercase;
font-weight:600;
font-size: 3.8em;
}



p.headline {
font-family: 'Nunito', sans-serif;
margin-bottom:0.1em;
text-transform: uppercase;
font-weight:600;
font-size: 2.3em;
}


p.subheadline {
font-family: 'Nunito', sans-serif;
margin-bottom:0.3em;
text-transform: uppercase;
font-weight:600;
font-size: 1.3em;
}


p.question {
text-transform: none;
margin-bottom:0.1em;
font-weight:600;
font-size: 1.2em;
}

p.hardfacts {
text-transform: none;
margin-bottom:0.1em;
font-weight:600;
font-size: 0.9em;
color: #000000;
}

p.graphics {


font-family: 'Nunito', sans-serif;
margin-bottom:0.3em;
text-transform: uppercase;
font-weight:700;
font-size: 1.3em;
}

p.navigation {


font-family: 'Lato', sans-serif;
margin-bottom:0.3em;
text-transform: uppercase;
font-size: 1.2em;
}

.style-logo {
margin-left: auto;
margin-right: auto;
display: block;
width: 200px;
padding: 0px 0px 35px 0px;
}


.style-nav ul {
list-style-type: none;
}


.style-nav ul li a {
text-decoration: none;
color: #2F322A;
font-size: 1em;
text-align: center;
display: block;
text-transform: uppercase;
padding: 8px 8px 4px 8px;
}

.button {
border: 2px #FFFFFF solid;
padding: 8px 30px;
border-radius: 30px;
color: #FFFFFF;
text-decoration: none;
}

.footer-text {
font-size: 0.9em;
margin-bottom: 2em;
}


.col {
width: 100%;
}


.row:before, .row:after {
content: "";
display: table;
}

.row:after {
clear: both;
}

.col-lg-one-fifth {
float: left;
padding: 0px 5px 5px;
width: 20%;
}

hr {
display: block;
height: 3px;
border: 0;
border-top: 1px solid #000000;
margin: 1em 0;
padding: 0;
}

/*Smartphone*/


@media (min-width: 1px){


body {
max-width: 90%;
}


.style-nav ul li {
display: inline-block;
font-size: 1em;
}


.style-nav ul {
text-align: center;
}

.col {
float: left;
padding: 0px 14px 14px;


}
}


/*Tablet*/


@media (min-width: 600px){


body {
max-width: 90%;
}


.style-nav ul li {
display: inline-block;
font-size: 1em;
}


.style-nav ul {
text-align: center;
}

.col-md-one-half {
width: 50%;
}

}


/*Desktop*/


@media (min-width: 1020px){


body {
max-width: 1000px;
}


.style-logo {
float: left;
}


.style-nav {
float: right;
}

.col-lg-one-third {
float: left;
padding: 10px 10px 10px 5px;
width: 33.333333%;
}

.col-lg-one-fourth {
width: 25%;
}

}



/*Others*/

.responsive-video iframe {
position: absolute;
top: 0;
left: 1.5%;
width: 100%;
height: 100%;
}


.responsive-video {
position: relative;
padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
padding-top: 0px;
height: 0;
overflow: hidden;
}

Alles anzeigen

Danke für eure Hilfe!

JR Cologne · 14. Dezember 2017

Schlicht und ergreifend, weil du ab 600px Breite deine zwei Spalten eingestellt hast.

Ich fürchte, du hast Media Queries noch nicht ganz verstanden.

Bei einem Mobile-first-Ansatz nutzt du min-width in den Media Queries und steigerst dich von dem kleinsten Smartphone zum größten Desktop.

Bei einem Desktop-first-Ansatz nutzt du max-width in den Media Queries und gehst vom größten zum kleinsten Gerät.

Dein min-width: 1px ist folglich schon mal kompletter Quatsch, da dies eben zu den kleinsten Geräten gehören würde, was eigentlich der Code komplett außerhalb der Media Queries sein sollte.

derneue2017 · 15. Dezember 2017

(min-width: 1px).

Verstehe ja nicht viel,aber das muss ein sehr kleines Handy sein.

olkostbe · 15. Dezember 2017

Hallo ailleen,

sehe gerade, dass Dein CSS geändert wurde. Allerdings ist mir nicht ganz klar was konkret nun responsive auf Deiner Seite sein soll, auch wenn Du Teile davon in CSS so programmiert hast. - Bitte nicht falsch verstehen,- das ist nur meine persönlich Ansicht.

Ich habe bisher ganz gute Erfahrungen bei Responsive Webdesign mit Prozenten und "em" gemacht. Allerdings sind das auch nur meine 5 cents.

Ansonsten hat JR Cologne eigentlich alles gesagt was wichtig ist.

Website-Anzeige auf Tablets fehlerhaft

Jetzt mitmachen!

Teilen

Tags