Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet...

[Matthias Scharwies (nicht angemeldet)]

Hallo nochmals,

Ich poste hier mal mein css... (immer noch mit Pixel-Angaben, da mir deren erfolgreiche Ersetzung, wie oben erwähnt, einfach noch nicht klar ist) mit der Frage, ob man den Code nun komplett über den Haufen werfen sollte, oder ob er mit stellenweisen Änderungen vielleicht doch noch brauchbar gemacht werden kann.

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

html,
html *  {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	font-weight: 400;
	}
	A:hover { color: #333333;  }
	

Sag mal, könnte es einfach nur ein Rechenfehler sein?

Du gibst nur html und dessen Kindelementen (html *) ein box-sizing. Gerade in Navigationen und z.B bei Bildern, die nicht direkte Kindelemente von html sind, gibt es aber noch Abstände in Form von margin, padding und auch border.

Probier mal:

html {
  box-sizing: border-box;
}
*, ::before, ::after {
  box-sizing: inherit;
}

• CSS/Eigenschaften/box-sizing

Und schau mal, wann die Breakpoints umschalten, indem du im Firefox das Browser-Fenster immer weiter zusammenziehst.