Website responsive auf dem Smartphone: Header farblich hervorheben?

isarc · 17.08.2021

Hallo

weiß jemand wenn ich bei der Responsive Websites auf dem Smartphone den Header komplett in einer anderen Farbe gestalte..?
Wisst ihr was ich meine?

Vermutlich über Media Queries. Aber welche ID oder Klasse spreche ich an?

Headerfarbe in der Adressleiste:

draupnir · 17.08.2021

1. CSS-Datei, die vom HTML aufgerufen wird:

@charset "UTF-8";
/* Aufrufe der Anpassungen von gross nach klein */
@import url(screenMax.css) only screen and (min-width: 769px);
@import url(screen1024.css) only screen and (max-width: 1024px) and (min-width: 768px);
@import url(screen768.css) only screen and (max-width: 768px);
@import url(screen480.css) only screen and (max-width: 480px);
/* Druck-Version */
@import url(print.css) print;
/* Ende der Datei. */

2. weitere CSS-Dateien wie "screen480.css" mit dem Inhalt:

@charset "UTF-8";
body { background-image: url(../allgemein/screen480.png); }
/* Ende der Datei. */

Statt "body" kannst Du jedes andere Objekt anpassen, verändern, ausblenden, ...

Testen kannst Du es auf Mac oder PC, in dem Du die Breite des Browserfenster veränderst. Ein realer Test auf mobilen Geräten sollte trotzdem nicht unterbleiben. Es gibt immer wieder mal Überraschungen, wie HTML/CSS interpretiert werden.

Wenn Du brauchst, kannst Du mich auch direkt anschreiben.
– Jens.

dn3d_fanboy · 17.08.2021

Meinst du den Header der Website oder den Header der Browser-App, also die Farbe des Bereichs oben, wo die Adresse, etc. angezeigt wird?

Letzteres kannst du mit folgendem Code im <head> der Seite erreichen:

HTML:

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">

draupnir · 18.08.2021

dn3d_fanboy schrieb:
Letzteres kannst du mit folgendem Code im <head> der Seite erreichen:

Nach https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color funktioniert das aber nur im Safari.

Aber Du hast recht, die Frage nach dem »Header« kann man so und so verstehen. Ich bin von dem Kopf einer mobilen Website ausgegangen.

– Jens.