PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Größe von Menu-Bänder in Webseiten


peddapille
2017-10-12, 18:53:19
Woher weiß eine Webseite, wie groß sie ein Menu-Band darzustellen hat?

Hintergrund:
Ich programmiere gerade eine Android-App, in der ich Geogebra-Worksheets
einbinde. Ich kann den User-Agent des Browsers so manipulieren, dass er eine andere Auflösung vorspielt. Ich kann auch ganze Seiten zoomen.

ABER: Das Menu-Band oben bleibt immer gleich (groß). Man kann das gleiche Phänomen auch bei z.B. www.welt.de beobachten. Das Menuband bleibt immer mit dem Lineal abmessbar gleich groß.

...wie machen die das??

Ectoplasma
2017-10-13, 12:26:13
Ähm, ne, bleibt es nicht. Es zoomt wie alles andere auf der Seite ganz normal mit (Firefox + Safari + Chrome). Vielleicht macht bei dir ja das HTML "nav" Element etwas spezielles. Jedenfalls kann ich bei www.welt.de in der Seite keine speziellen Viewport - Einstellungen erkennen (was evtl. aber am User - Agent liegen könnte).

Vielleicht hilft dir ja evtl. diese Seite weiter. Mobile Devices: Viewport richtig einstellen (http://html5-mobile.de/blog/meta-viewport-fuer-mobile-anpassen).

RattuS
2017-10-15, 02:03:20
Das obere Menü auf welt.de ist ein normaler block-Container mit

position: fixed; /* immer an der selben Stelle, auch nach dem Scrollen */
width: 100%; /* immer volle Breite des Bildschirms */
top: 0; /* immer oben */


Den UserAgent wertet man eigentlich nur noch für die Unterscheidung zwischen touch und click Device aus. Ansonsten gilt nämlich immer Device Resolution bzw. Viewport Dimensions als Maßstab, Stichwort Media Queries.

peddapille
2017-10-16, 18:52:17
Danke für Eure antworten!

@Rattus:
Wie liest die Webseite denn die Device-Resolution aus, wenn nicht über den User-Agent?
Und: Kann man diese Größe manipulieren?

RattuS
2017-10-16, 21:09:46
Wie liest die Webseite denn die Device-Resolution aus, wenn nicht über den User-Agent?
CSS bietet Media-Queries (https://www.w3schools.com/css/css_rwd_mediaqueries.asp) und JavaScript hat window.innerWidth / window.innerHeight - z.B. notwendig, wenn Elemente ersetzt werden müssen (Beispiel: ein horizontales Menü wird zu einem Button für ein vertikales Menü).