Responsive-Anzeige (viewport)

[klwild]

Hallo zusammen. Ich bin neu hier, heisse Klaus und betreibe mehrere privat Webseiten.

Mein aktuelles Projekt gibt mir Rätsel auf und ich komme nicht weiter. Google hilft auch nicht mehr. N.b. Auf dem Desktop funktioniert alles einwandfrei!

Rufe ich meine Seite: hunderttausend-zuger-unternehmen.ch über das Smartphone auf, ist es nicht mehr so schön, man kann nicht alles sehen und auch nicht hin sliden oder vergrössern. Siehe Screenshots.

Das innere Bild, um das es geht, ist ein in WordPress eingebetteter HTML iFrame, in dem auch eine Zeile:
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes">
enthalten ist.

Wie mache ich die Seite resp. das Bild grösser oder dass man wenigstens bis zum Ende sliden kann? Es wäre auch egal, wenn es gequetscht wäre, Hauptsache man sieht alles.

Danke für die Unterstützung & Gruss

 

[Sempervivum]

Guten Morgen Klaus und willkommen im Forum!

Du hast da im usemap="“#gridmap“" komische Gänsefüßchen, außerdem habe ich von usemap im Zusammenhang mit iFrame noch nie gehört. Lösche das ganze Attribut am besten.

Weiter hast Du scrolling="no" beim iFrame notiert, das unterbindet das Scrolling. Setze es auf "auto". Ich habe das in der Smartphone-Ansicht meines HTML-Inspektors versucht aber dort funktioniert es nicht. Bin aber nicht sicher, ob das Verhalten eines Smartphones dort richtig nachgebildet wird.

Ein iFrame ist zwar nicht generell etwas Schlechtes aber wenn es um das responsive Verhalten der Darstellung der Inhalte darin geht, ein wenig schwer zu handhaben. Da der iFrame auf deiner eigenen Domain liegt, prüfe doch ob Du diese Inhalte auch mit PHP-include einbinden kannst.

Beste Grüße, Ulrich

 

[AndreasB]

Zusätzlich zu dem, was Sempervivum gerade geschrieben hat, hast du noch das Problem, dass du deine beiden Images in deinen links mit position: fixed im iframe mit einem Pixelwert positionierst.
(Das Murer Image mit left: 200px und right: 200px und das Gute Frage mit left: 700px und right: 700px.)
ein Fix positioniertes Element orientiert sich immer an der linken oberen Ecke des Sichtbaren Bereiches (Was hier der iframe ist).
Wenn der Bildschirm nun schmaler als 700px wird, ist das Gute Frage Image nicht mehr sichtbar und könnte auch nicht über Scrollen erreicht werden.

Eine Idee wäre es, die Positionierung prozentual vorzunehmen.
Oder die Elemente über position: absolut an einem Element innerhalb des Documents zu orientieren. Damit wäre es zumindest theoretisch durch scrollen erreichbar.

 

[klwild]

Danke für die Antworten und Hinweise

- ... ich verwende WordPress als CMS, da es mir sehr viele Arbeiten abnimmt
- usemap="“#gridmap“" habe ich angepasst k.A. wie das dahin gekommen ist
- scrolling="yes" habe ich bereits probiert, macht aber eine Scrollleiste die sich aber nicht scrollen lässt
- ... als php Include habe ich das versucht, geht aber nicht an der Stelle wo der Code hingehört
- Im Konzept der Webseite und der Positionen der Images sehe ich keine Möglichkeit für Prozentuale positionieren

- Das Original PHP funktioniert ansonsten einwandfrei: https://hunderttausend-zuger-unternehmen.ch/wp-content/_mainpage/mainpage.php

Am liebsten wäre mir, wenn der Aufwand zu gross ist, einfach ein Bild mit dem Hinweis, dass das nur auf dem Desktop läuft, wo es auch Sinn macht.

... aber so schnell gebe ich nicht auf!

 

[Sempervivum]

Mal eine vage Vermutung, da Du dem Bild im iFrame die ID "worldmap" gibst: Es soll sich in der finalen Ausgabe um eine Landkarte handeln wo die Unternehmen an ihrem Standort angezeigt werden? Dann würde das scheinbar willkürlich Positionieren Sinn machen.

 

[klwild]

Nein. Ich benötige fixe Positionen!

Das alles ist eine Anlehnung an:



... ganz im kleinen nur für die Stadt bzw. den Kanton Zug. Grösse und Position sind in einer Datenbank gespeichert.

Gruss Klaus

 

[scatello]

Du könntest dir mal ansehen, wie es bei deiner Beispiel-Seite gemacht wurde: https://github.com/BinaryMoon/MillionDollarHomepage

 

[klwild]

Scatello. Wo sehe ich was? Klaus

 

[Sempervivum]

Wenn Du den Link auf Github öffnest siehst Du einen Link auf index.html. Öffnest Du auch diesen, siehst Du das HTML. Die Seite ist mit einer Imagemap mit sehr zahlreichen Verweisen realisiert. Ich empfehle nicht, das nachzumachen:

• Die Bilder sind dann in einer einzigen großen Grafik versammelt, die Du aus deinen Einzelbildern erst Mal generieren müsstest.
• Dadurch würde der Zusammenhang zwischen Grafik und Link verloren gehen, bzw. nur noch in den Koordinaten der Verweise stecken - sehr unübersichtlich.

Nachdem Du dieses Muster mit Million Dollar gepostet hast, versteht man jetzt jedoch, was Du vor hast und warum dein vorhandener Code nicht funktioniert:

• Damit man überhaupt den iFrame scrollen kann, muss sein Inhalt größer sein als sein Fenster. Das ist bei dir nicht der Fall, da Du die Breite des Rasterbildes auf 100% gesetzt hast. Setze sie zunächst mal auf einen festen Wert, z. B. 1000 x 1000.
• Du hast die kleinen Bilder in den Links fixed positioniert, dadurch bleiben sie stehen, auch wenn man scrollt. Positioniere sie absolute.
• Bereinige ich dann den iFrame kann ich zumindest in der Smartphone-Ansicht meines HTML-Inspektor scrollen und alle Bereiche des Bildes mit den Links und den Bildern darauf ansehen.

<iframe src="https://hunderttausend-zuger-unternehmen.ch/wp-content/_mainpage/mainpage.php" scrolling="auto" loading="auto" frameborder="1" style="width: 100%; height: 758px;"></iframe>

 

[klwild]

Du hast die kleinen Bilder in den Links fixed positioniert, dadurch bleiben sie stehen, auch wenn man scrollt. Positioniere sie absolute.

... mit absolute sind sie nicht mehr auf dem Bild, sondern rechts daneben.

Habe den iFrame Code exakt so angepasst und am Desktop und am Smartphone kann ich jetzt scrollen. Das ist schon mal gut.

Sehen kann man das wieder hier: https://hunderttausend-zuger-unternehmen.ch/

 

[AndreasB]

Du hast auch deine Links Absolut positioniert.
Diese bilden dann den Bezugsrahmen für die Bilder.
Nimm position: absolute für die Links wieder raus.

 

[Sempervivum]

Hinzu kommt, dass Du meine Empfehlung, das Bild zunächst auf eine feste Größe zu setzen, ignoriert hast. Grundsätzlich gilt:

• Setzt Du die Breite des Rasterbildes auf 100% musst Du auch die Positionen der Bilder in den Links als Prozentwerte angeben, sonst verschiebt sich alles, wenn sich die Breite des iFrame ändert.
• Gibst Du die Positionen der Links dagegen absolut in px an, musst Du auch die Größe des Rasterbildes absolut angeben.

Außerdem ist es ziemlich irritierend, dass Du die kleinen Bilder in den Links absolut positionierst, besser die a-href-Tags absolut positionieren und bei den Bildern darin kein position angeben.

 

[scatello]

Wenn man sich diese "milliondollarhomepage" mal ansieht, wird man feststellen, dass dort nicht ganz viele kleine Grafiken zu sehen sind, sondern nur eine einzige Grafik, das scheint mir für so ein Vorhaben auch die beste Idee zu sein.

 

[klwild]

Setzt Du die Breite des Rasterbildes auf 100% musst Du auch die Positionen der Bilder in den Links als Prozentwerte angeben, sonst verschiebt sich alles, wenn sich die Breite des iFrame ändert.

Ups. vergessen! Mache das sofort. Wäre eigentlich auch logisch, % in % und px in px.

Wenn man sich diese "milliondollarhomepage" mal ansieht, wird man feststellen, dass dort nicht ganz viele kleine Grafiken zu sehen sind, sondern nur eine einzige Grafik, das scheint mir für so ein Vorhaben auch die beste Idee zu sein.

Ich denke auf dem Bild ist es wirklich nur ein grosses, Bild aber den Slogan, wenn man darüber fährt würde ein riesiges <area> geben.

 

[scatello]

würde ein riesiges <area> geben

Genau das ist es auf dieser Seite

 

[klwild]

Genau das ist es auf dieser Seite

Oh! Muss ich alles noch einmal überdenken?

Versuche das erst noch mit den % in % und px in px.

 

[Sempervivum]

Wenn man sich diese "milliondollarhomepage" mal ansieht, wird man feststellen, dass dort nicht ganz viele kleine Grafiken zu sehen sind, sondern nur eine einzige Grafik, das scheint mir für so ein Vorhaben auch die beste Idee zu sein.

Da bin ich anderer Meinung und habe dies in Posting # (wo ist die Nummer des Postings ) begründet:

• Die Bilder sind dann in einer einzigen großen Grafik versammelt, die Du aus deinen Einzelbildern erst Mal generieren müsstest.
• Dadurch würde der Zusammenhang zwischen Grafik und Link verloren gehen, bzw. nur noch in den Koordinaten der Verweise stecken - sehr unübersichtlich.

 

[scatello]

@Sempervivum
deine beiden Punkte könnte man mit PHP automatisieren

 

[klwild]

@Sempervivum
deine beiden Punkte könnte man mit PHP automatisieren

... es ist ja, so wie es ist, alles in PHP realisiert und am besten wäre es auf dem Smartphone oder Tablet eine Meldung zu zeigen, dass das nur auf dem Desktop richtig angezeigt werden kann.

 

[Sempervivum]

am besten wäre es auf dem Smartphone oder Tablet eine Meldung zu zeigen, dass das nur auf dem Desktop richtig angezeigt werden kann.

Es würde auch auf dem Smartphone angezeigt werden, nur eine Menge Scrolling erfordern, was natürlich wenig benutzerfreundlich wäre. Aber statt aufzugeben würde ich empfehlen, eine Alternative zu suchen, die auch auf kleinen Bildschirmen bedienbar ist.

• Eine einfache Liste der Firmen mit Logo, aber Suchfunktion, wo man einige Buchstaben eingibt und die passenden Firmen angezeigt bekommt.
• Es wäre auch machbar und ganz elegant, ebenfalls ein Suchfeld, wo aber der gewählte Treffer in der großen Grafik angefahren wird.