zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Seite auf mobiler Ansicht gleich wie auf Desktop

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.08.2018, 15:01
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.08.2018
Beiträge: 52
IxonTV befindet sich auf einem aufstrebenden Ast
Standard 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?

Geändert von IxonTV (20.08.2018 um 15:05 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.08.2018, 16:09
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

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 anzeigen
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.";
}
?>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.08.2018, 16:22
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.08.2018
Beiträge: 52
IxonTV befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 20.08.2018, 16:44
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von IxonTV Beitrag anzeigen
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.
Mit Zitat antworten
  #5 (permalink)  
Alt 20.08.2018, 17:18
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 142
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 20.08.2018, 18:48
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.08.2018
Beiträge: 52
IxonTV befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Sailor56 Beitrag anzeigen
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.
Mit Zitat antworten
  #7 (permalink)  
Alt 20.08.2018, 19:19
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 142
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 20.08.2018, 19:24
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.08.2018
Beiträge: 52
IxonTV befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 20.08.2018, 19:47
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 20.08.2018, 19:49
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 142
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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'.

... 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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Seite in Seite B3ndech0 Javascript & Ajax 12 06.01.2010 14:42
Wordpress Seite Passwort-Schützen? sepp88 Serveradministration und serverseitige Scripte 5 01.11.2009 13:56
Seite wird auf anderem Computer falsch dargestellt Patrick Egli CSS 3 01.11.2009 11:40
Shtml auf jeder Seite einbinden - counter iVx Serveradministration und serverseitige Scripte 1 13.09.2007 18:31
Fixer Header (CSS Frame) und Sprung zu Anker auf dieser Seite Chico_wau CSS 2 14.05.2007 19:08


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:48 Uhr.