Thread Verfasser: adlatus
Thread ID: 1465
Thread Info
Es gibt 9 Beiträge zu diesem Thema, und es wurde 3504 Mal angesehen.
 Thema drucken
Panelbreite ändern
adlatus
Hallo allerseits,

ich möchte gerne die Panelbreiten meiner Seite so ändern, dass man die HP gut auf dem Smartphone angezeigt bekommt, aber auch auf Laptop und PC ohne Scrollbalken.

Nun habe ich das Problem, dass mir Inhalte auf dem Smartphone fehlen, wenn ich das theme in der theme.php auf 100% lasse:

Zitat

define("THEME_WIDTH", "100%");


Ändere ich auf 125 %, so wird mir auf dem Smartphone die Seite ohne Fehler / Darstellungsfehler angezeigt. Genau so, wie ich sie haben möchte. Dann allerdings sehe ich auf dem Browser nur einen Teil der Homepage und muss mit einem Scrollbalken links/rechts arbeiten. Das ist natürlich supoptimal.

Ich hänge Bilder an, die das ganze zeigen. Die "länglichen" sind screenshots vom Smartphone. Hier erkennt man auf dem ersten, dass die Seite passt (Einstellung auf 125% in der theme.php). Die anderen beiden zeigen die Seite mit fehlenden Teilen (theme.php mit 100%). Die anderen beiden Bilder zeigen genau das Gegensätzliche.

Wer kann mir sagen, wie ich das hinbekomme, dass sowohl auf dem PC / Laptop, als auch auf dem Smartphone die Seite gleich gut angezeigt wird?

Vielen Dank im Voraus für Eure Hilfe

LG
addi
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Krelli
100% ist die gesamte Breite deines Browserfensters. Wenn du das auf 125% festlegst ist es logisch, dass der Inhalt zu breit wird und du mit horizontalen Scrollbalken arbeiten musst.

Für Kompatibilität mit dem Smartphone ist viel mehr nötig als nur mal eben die Breite anders zu definieren.

Als vorübergehende Notlösung würde ich dem Theme im Header das Metatag "viewport" hinzufügen:

<meta name="viewport" content="width=1024" />
Damit wird die gesamte Seite bei Aufruf auf kleinen Displays auf voller Breite angezeigt (wenn diese nicht von vornherein mehr als 1024 Pixel Breite benötigt).

Das hat natürlich mit wirklich "responsivem" Layout nichts zu tun, denn die Inhalte sind winzig und müssen vom Betrachter in der Regel dann gezoomt werden.
Information:
PHP Version: 8.2.x •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: IPv9-DE-MOD
 
adlatus
Danke für den Tipp.

Kannst Du mir noch sagen, wohin genau der code in die theme.php gehört ?


Vielen Dank und beste Grüße
addi
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Krelli
Dafür hast du 2 Möglichkeiten.

Variante 1 (weniger empfohlen): Diese Anweisung fest einbauen, so dass sie immer aktiv ist (egal welches Theme verwendet wird).
Dafür muss in der Datei themes/templates/header.php noch vor der Zeile

echo "</head>\n<body>\n";
folgende Zeile eingefügt werden:

echo "<meta name='viewport' content='width=1024' />\n";
Da verschiedene Themes aber auch unterschiedliche Breiten haben und hier von einer Breite von 1024 Pixel ausgegangen wird, wäre Variante 2 die bessere Alternative. Hier wird der Code jeweils in der theme.php des Themes hinzugefügt.
Hinweis: die Anweisung muss anders lauten, wenn das Theme responsiv ist. Diese gesamte Anleitung gilt nur für Themes, die auf kleinen Displays zu groß dargestellt werden..

Variante 2: Hast du also ein Theme, welches nicht "mobile-friendly" ist, fügst du folgendes unterhalb der Zeile mit der render_page() Funktion ein (am besten direkt nach der Zeile mit den global $settings, .... Angaben):

add_to_head("<meta name='viewport' content='width=1024' />");

Diese Maßnahme sorgt nun dafür, dass alle Displays mit weniger Breite als 1024 Pixel die Seite so skalieren, dass bei Aufruf die volle Breite über 1024 Pixel sichtbar und die Seite zoombar ist.

Die Angabe für 1024 Pixel kannst du je nach Anforderungen deines Themes abändern.
Information:
PHP Version: 8.2.x •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: IPv9-DE-MOD
 
adlatus
Danke für den Tipp. Ich habe versucht, das ganze umzusetzen.
Das Theme ändert aber nicht seine Ansicht. Weder auf Laptop / PC, noch am Smarthpone Sad
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Krelli
In dem Fall ziehen dein Header und die zu großen Bilder in den Mittelpanels deine Seite in die Breite.
Information:
PHP Version: 8.2.x •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: IPv9-DE-MOD
 
adlatus
Das Banner ist es nicht allein. Denn wenn ich es komplett herausnehme, dann ist das mittlere Panel trotzdem nicht komplett sichtbar. Das Verkleinern der Bilder im mittleren Panel als Lösung gefällt mir aber nicht so gut. Denn dann wird die Seite auf dem PC / Laptop zu klein...

Kann man die Panelbreite für das mittlere Panel nicht ändern / breiter machen?

LG
addi

Zusammengefügt am 11. Mai 2018 um 14:24:53:

Zitat

Systemweb schrieb:

In dem Fall ziehen dein Header und die zu großen Bilder in den Mittelpanels deine Seite in die Breite.


Die Bilder im Mittelpanel verbreitern das Panel nicht. Die Bilder werden an der rechten Seite einfach "abgeschnitten". Es fehlr also ein Teil der News, weil das Panel nicht breit genug ist, um den Inhalt anzuzeigen.
Bearbeitet von adlatus am 11. Mai 2018 12:24:53
Information:
PHP Version: Nicht ausgewählt •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: Nicht ausgewählt
 
Layzee
Diese alten Table-Templates (Tabellenaufbau) arbeiten in der Regel immer mit festen Breiten (Pixel). Das Problem sind also nicht die Inhalte sondern das "Gerüst" in dem die Inhalte dargestellt werden sollen.
Das lässt sich im Grunde nur entsprechend Deinem Wunsch lösen, wenn man das ganze Table-Layout zumindest in einen DIV-Aufbau umbaut mit dynamischen Breiten, was aber dann
wegen der einzelnen Backgroundgrafiken mitunter eher unschön wird.

Wer glaubt, dass eine Webseite mit Tabellenaufbau mit nur einer Zeile Code "Mobilefreundlich" wird, der irrt leider
.
-
Information:
PHP Version: 7.2.x •  MySQL Version: 8.0 •  PHP-Fusion: IUP-FIX-PHP8
 
Krelli
@adlatus:
Das gesamte Layout ist sehr breit. Der Header oben benötigt geschätzt weit mehr als 1200 Pixel.
Der Bereich darunter mit den ganzen Panels verschwendet viel Platz, da dort links und rechts großzügige Abstände festgelegt sind.

Wie Layzee schon sagte, um dein Design auf einem Smartphone oder Tablet vernünftig darzustellen müsste das Theme grundlegend umgebaut werden.
Information:
PHP Version: 8.2.x •  MySQL Version: Nicht ausgewählt •  PHP-Fusion: IPv9-DE-MOD
 
Springe ins Forum: