XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   Seite auf mobiler Ansicht gleich wie auf Desktop (http://xhtmlforum.de/showthread.php?t=73582)

IxonTV 20.08.2018 15:01

Seite auf mobiler Ansicht gleich wie auf Desktop
 
Hallo, ich habe eine Seite die für einen FullHD Monitor ausgelegt ist. Ich werde das auch noch ändern, dass es mit 4K usw geht. Nur die mobile Ansicht macht mir zu schaffen:
So ist es: aromacafe.de
So soll es sein: PROMOTEX - Werbetechnik aus einer Hand - Index

Außerdem ist mir aufgefallen dass die Hintergrundfarben, die ich für den Browser genommen habe, in der mobilen Ansicht teils nicht zu sehen sind, das sieht man gut bei einem Vergleich Desktop gegen Mobil.

Was noch zu erwähnen wäre: Obwohl ich einen .htaccess Passwortschutz in einem Untervrrzeichnis habe, fragt er mich nach dem Passwort schon auf der Mainpage

Edit: Ich weiß jetzt woran der letzte Punkt liegt: ich habe ein Bild in dieser „gesperrten Zone“ abgespeichert was auf der Mainpage aufgerufen wird. Wenn ich das Passwort nicht eingebe wird mir nur ein großer weißer Kasten angezeigt. Wie kann ich umgehen, dass die .htaccess den Zugriff auf Dateien verhindert? Also zumindest den Zugriff vom Programm selbst auf Dateien?

protonenbeschleuniger 20.08.2018 16:09

Zum ersten Punkt kann ich nichts sagen, da nicht klar ist, was du mit mobile Ansicht meinst. Ich sehe auf PROMOTEX - Werbetechnik aus einer Hand - Index konkret keine Änderung, wenn man das Fenster kleiner macht. Aber soweit ich das sehe, ist das doch komplett XT-Commerce, d.h. man bräuchte darüber mehr Infos, welche Feature erfüllt werden und welche nicht.


Zitat:

Zitat von IxonTV (Beitrag 552781)
Edit: Ich weiß jetzt woran der letzte Punkt liegt: ich habe ein Bild in dieser „gesperrten Zone“ abgespeichert was auf der Mainpage aufgerufen wird. Wenn ich das Passwort nicht eingebe wird mir nur ein großer weißer Kasten angezeigt. Wie kann ich umgehen, dass die .htaccess den Zugriff auf Dateien verhindert? Also zumindest den Zugriff vom Programm selbst auf Dateien?

Wenn das ginge wäre der Schutz dahin.
Du könntest höchstens ein Skript schreiben, dass dir die entsprechende Datei ausgibt. Das Skript muss natürlich ausserhalb des Bereich der htaccess Datei sein.

Im einfachsten Fall sähe es so aus:
PHP-Code:

<?php
$img 
"/pfad/zum/bild/bild.jpg";
if (
file_exists($img)) {
    print 
header("Content-Type: image/jpeg");
    
readfile($img);
} else {
    print 
"Fehler: $img existiert nicht.";
}
?>


IxonTV 20.08.2018 16:22

Mobile Ansicht heißt, wie es auf Handys dargestellt wird. Öffne ich die Promotex Seite auf dem PC und vergleiche die mit der Ansicht auf dem PC, sehe ich keinen Unterschied. Genau das will ich auch haben.

protonenbeschleuniger 20.08.2018 16:44

Zitat:

Zitat von IxonTV (Beitrag 552786)
Mobile Ansicht heißt, wie es auf Handys dargestellt wird. Öffne ich die Promotex Seite auf dem PC und vergleiche die mit der Ansicht auf dem PC, sehe ich keinen Unterschied. Genau das will ich auch haben.

Wie gesagt, dass ist relativ umfangreicher Code einer Anwendung. Ich sehe bei schnellen drüberschauen (ich habe schnell die drei CSS dateien durchgescrolled) keine Stelle wo eine spezifische mobile Ansicht erzeugt wird. Es kann aber sein das da irgendwo Javascript Code versteckt ist, der das tut. was aber nicht unbedingt "State of the Art" wäre.

Wobei ich aber auch nur den Code sehe http://www.my-promotex.de/gm_javascr...=&products_id= und das ist ein 10 Jahre altes Skript.

Insofern ist nicht klar, was Unterschiede produziert.

Sailor56 20.08.2018 17:18

Auch wenn ich es nicht testen kann, könnte ich mir vorstellen, dass du mit einer festen Breitenangabe für <div id="wrapper"> deinem Ziel näher kommst.
Also statt dem Format 'width: 98vw;'
setze mal
HTML-Code:

width: 1400px;
margin: 0 auto;

Margin zentriet das div und mit der Breite in px musst du mal mit spielen und ausprobieren.

Und wenn es dann nicht klappen sollte, könntest du zusätzlich testen, ob sich was verändert, wenn du im <head> Bereich das
HTML-Code:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
mal auskommentierst bzw löscht.

Aber wie gesagt... ich stochere da auch etwas im Dunkeln und ... aber Versuch macht klug.

IxonTV 20.08.2018 18:48

Zitat:

Zitat von Sailor56 (Beitrag 552791)
Also statt dem Format 'width: 98vw;'
setze mal
HTML-Code:

width: 1400px;
margin: 0 auto;


Bei der Desktop Version sieht man auf jeden Fall einen Unterschied, ich hätte jetzt spontan gedacht dass das funktioniert, aber auf der mobilen Version bleibt es leider so komisch eingerückt... Ich glaube dass hat etwas damit zutun dass andere CSS Sachen auch nicht richtig ausgeführt werden, ist ja schließlich auch im CSS File mit drin.

Sailor56 20.08.2018 19:19

Zitat:

Ich glaube dass hat etwas damit zutun dass andere CSS Sachen auch nicht richtig ausgeführt werden,
Das kann gut sein - da ist einiges, was sicherlich 'verbesserungswürdig' ist.
Fängt damit an, dass da viele Fehler drin sind, von denen ich nicht einschätzen kann, was die alles an seltsamen Dingen verursachen... der w3c.org Validator sagt folgendes
https://validator.w3.org/check?uri=h...Inline&group=0
Schau mal, ob die Fehler beseitigt bekommst.

Als nächstes mischt du im Code 'inline Styles'... also Formatierungen in den HTML Tags.. mit Formatierungen im Stylesheet. Hmmm... das ist mehr als unglücklich. Schmeiß diese ganzen Inline-Styles raus und formatiere das Ganze mit CSS im Stylesheet.

So ganz durchschaue ich auch noch nicht die Idee, die sich hinter deinem Layout verbirgt. Du gibst eine uralt Webseite als Vorlage/Referenz an, die alles andere als responsive ist und willst es genau so haben, aber du übersiehst dabei offensichtlich, dass es zwischen der Desktopansicht und der Handyansicht noch etliche andere Displayversionen und Bildschirmauflösungen gibt. Sollen die alle von deiner Seite ausgeschlossen werden, weil sie nur Teile davon oder gar nichts sehen können?

Mach doch mal einen Selbstversuch und gehe auf deine Beispielseite und verkleinere das Browserfenster...
Da wird die Seite einfach abgeschnitten, wenn du unter die im CSS eingestellte Breite kommst... nicht jeder hat ein 21" Display mit 1900px Breite.
Wenn du die o.a. Fehler raus hast, dann melde dich wieder - vielleicht finden wir einen Weg deine Vorstellungen mit CSS und MediaQueries irgendwie umzusetzen.

IxonTV 20.08.2018 19:24

Also... erstmal Danke für die ganzen Tipps. Ich treffe halt bald den Typen für den ich die Website mache. Da der sehr viel mit dem Handy macht, wird er so sicher auch mal auf die Website schauen wenn ich das mit ihm dann bespreche. Erstmal will ich gar nicht, dass die ganze Seite an Handys, Tablets etc. angepasst wird, sondern dass die Seite eins zu eins so angezeigt wird, wie auf dem Desktop. Also erstmal will ich gar kein richtiges Responsive Design, sondern genau das gleiche Design. Nur auf dem Handy ist es zurzeit so, dass irgendwie alles auf die Bildschirmgröße eingerückt wird, und das sieht sehr unschön aus. Ich kümmere mich jetzt erstmal um die Sachen die du oben genannt hast.

protonenbeschleuniger 20.08.2018 19:47

Ach wir reden über aromacafe.de die Seite wurde mir zuerst nicht angezeigt.

Das die auf einem Mobilgerät anderst angezeigt wird, liegt mit Sicherheit an den Größenangaben. Du positionierst und die zwängst ein was dazu führt, dass auf kleinen Geräten skaliert wird.

Das ganze Layout liesse sich aber auch einfach flüssig umsetzen, sodas es auf den meisten Monitorgrößen bedienbar ist. Ich würde auf jeden Fall zu relativen Angaben raten. vw war gar nicht schlecht, alternativ auch Prozent.

Sailor56 20.08.2018 19:49

1:1 bedeutet aber auch, dass alle Elemente verkleinert werden und dann vom Inhalt (Schrift, Bilder, Links usw) wahrscheinlich nichts mehr zu erkennen ist...
hier mal ein Screenshot von deiner 'Beispielseite'.
http://s414653727.online.de/tab_test/promotex.png
... hmmm... so soll das sein :(?
Wobei die Bildgröße hier schon fast doppelt so groß ist wie das original auf dem Handy aussieht!
Halte mal dein Handy dagegen... dann siehst du wie groß das tatsächlich ist.


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:26 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019