@media wirkt sich falsch auf Smartphone aus

[Eddi]

Hallo, ich bin in CSS nicht sonderlich firm, möchte aber meine Homepage, die ich zunächst für die Größe eines Smartphones angepasst habe, nun auch auf einem PC lesbar machen. Gehofft habe ich auf "@media". Während die Darstellung am Bildschirm des PCs mit größer/kleiner ziehen sich tatsächlich anpasst, verkleinert sich das Smartphone auch, und zwar dauernd. Das habe ich nicht gewollt. Was mache ich falsch?

Auszug aus meinem head-Bereich:

body {
   width: 950px;
   padding: 0;
   font-size: 100%;
   line-height:1.2;
   color: black;
   background-color: #FFFFFF;
   align: center;
}

@media(min-width:900px){body{font-size: 80%;}}

h1 {
   font-size: 400%;
   line-height:1.1;
   margin: 0pt;
}
h2 {
   font-size: 220%;
   margin-top: 10px;
   margin-bottom: 0px;
   color: #58ACFA;
}

Danke euch! Eddi

Edit Rolf B: ~~~css / ~~~ Elemente hinzugefügt.

[Gunnar Bittersmann]

@@Eddi

Während die Darstellung am Bildschirm des PCs mit größer/kleiner ziehen sich tatsächlich anpasst, verkleinert sich das Smartphone auch, und zwar dauernd. Das habe ich nicht gewollt. Was mache ich falsch?

1.Du setzst eine feste Breite:

body {
   width: 950px;

2. Du hast nicht <meta name="viewport" content="width=device-width, initial-scale=1.0"/> im HTML zu stehen.

3. Du setzst die Schrift zu klein:

@media(min-width:900px){body{font-size: 80%;}}

4. Du verwendest px als Einheit. ☞ Zell Liew: PX, EM or REM Media Queries?

LLAP 🖖

[beatovich]

hallo

Ich würde noch hinzufügen, dass eine line-height von 1.2 sehr wenig ist, vor allem wenn man daran denkt, dass sensitive Fläche (also auch Links) eine gewisse an Finger angepasste Höhe brauchen.

[Eddi]

Ok. Teste ich. Danke!!

[Eddi]

Hallo,

danke Dir!

"viewport" hatte ich drin, nur nicht kopiert. Schriftgröße 80 % schien mir passend, probiere ich aber. Auch kann ich auf em umstellen.

Wenn ich aber 900px Breite rausnehme, wie lege ich die gewünschte Breite sonst fest?

Eddi

[Matthias Apsel]

Hallo Eddi,

Wenn ich aber 900px Breite rausnehme, wie lege ich die gewünschte Breite sonst fest?

Gar nicht.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Wenn ich aber 900px Breite rausnehme, wie lege ich die gewünschte Breite sonst fest?

Gar nicht.

Aber maximale Breite – zumindest für Fließtext. Die Seite soll ja nicht so blöd lesbar sein wie die Wikipedia.

LLAP 🖖

[Eddi]

Genau das meine ich.

[Matthias Apsel]

Hallo Eddi,

Genau das meine ich.

Dafür gibt es max-width: 40em; oder ähnlich.

Bis demnächst
Matthias

[Eddi]

Hm, meine Internetseite soll aber nicht über den ganzen Bildschirm gehen (au0er am Smartphone). 900px wären eine gute Breite.