Anpassung für Mobilgeräte passt nicht

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

DerNeuling21

Mitglied
15 September 2017
58
1
8
19
Hallo zusammen,

ich habe ein Problem mit der Anpassung meiner Webseite für Mobilgeräte.

Ich habe meine Webseite auf meinem Iphone, Samsung Smartphone und einem Tablet angeschaut und bekomme jedes mal eine minimal andere Ansicht meiner Webseite.

Getestet habe ich es dann noch einmal hier:
(Es geht mir jetzt hierbei um die Seite Leistungen)

http://www.responsive.cc/index

für die Webseite:

https://www.it-kraus.net/

auf allen Endgeräten. Dort sieht auch alles super aus, aber in echt halt nicht. Da ich auf den Endgeräten leider den Quellcode nicht untersuchen kann, kann ich auch leider nicht herausfinden, woren es jetzt liegt. Habt ihr noch eine Idee ?

Danke für eure Hilfe.
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.496
220
63
ich habe ein Problem mit der Anpassung meiner Webseite für Mobilgeräte.
Wir kennen das Problem aber nicht. Um dir helfen zu können musst du das schon genauer beschreiben.

Beim Anschauen des Quelltextes fällt mir auf, das du als Doctype zwar HTML5 angibst, dich aber nicht an die HTML5-Regeln hälst. Du hast doppelte Inhalte und viele vollkommen überflüssige Container. Dazu noch Klassen ohne Ende. Sowas hat in HTML5 nichts verloren. Schon allein dadurch ergeben sich viele Probleme.
 

basti1012

Aktives Mitglied
26 November 2017
842
85
28
38
Minden
sebastian1012.bplaced.net
Also ich habe erstmal mit Laptop und den ganzen Programmen geschaut wie es auf den anderen Endgeräten aussieht und da muss ich sagen das ich da nix finden konnte.

Dann habe ich mal mit Tablett und Handy geschaut und da wahr auch alles ok.

Habe dann mal die Browser gewechselt und der Chrom hat bei Handy und Laptop gleich rumgemuckt.
CHROM schrieb
Die Seite verbrauch sehr viel Arbeitspeicher und deswegen konnte Chrom nicht alles laden.
Dann sah es natürlich nicht mehr so aus wie auf die anderen Geräte.

Hast du mal andere Browser getestet ob du dann deine Fehler auch noch hast?

Dann wäre eine genauere erklärung auch vorteil haft was du genau meinst mit deinen Fehlern, weil ich konnte sonst nix finden Optisch. Im Code selber habe ich noch nicht reingeschaut dazu kann ich jetzt noch nix sagen.
 

DerNeuling21

Mitglied
15 September 2017
58
1
8
19
Hier mal 2 Bilder von meinem Iphone, wie es dort aussieht. Das Problem sind irgendwie die CSS Eigenschaften für das Hintergrundbild. Ich habe bisher kein mobiles Endgerät getestet, bei dem es so richtig aussieht, wie am PC eigentlich dargestellt (Das mit dem RAM, hatte ich bisher auch noch nicht als Meldung). Habe die Seite sogar für IE angepasst.

(Bei mir meckert er hier immer rum beim Bilder hochladen)
 

Sailor

Aktives Mitglied
14 Juli 2017
394
46
28
Sieht so aus, als hättest du in der mobilen Ansicht einen horizontalen Scrollbar. Lässt dann darauf schließen, dass du ein (oder mehrere) Element hast, das für die Anzeige zu breit ist.
Kann da aber auf die Schelle nichts entdecken - Hintergrundbilder können es aber nicht sein, denn die belegen keinen Platz.
 

Sailor

Aktives Mitglied
14 Juli 2017
394
46
28
Auf meinem meinem Handy (Samsung / Android) kann ich auch keine Fehler feststellen... welches Smartphone mit welchem Browser zeigt bei dir den Fehler?
Auffällig jedoch, die Performance ist grottig - das liegt aber wohl zum Teil an den übergroßen Bildern, die die Ladezeiten unnötig verlängern.
 

DerNeuling21

Mitglied
15 September 2017
58
1
8
19
Wir kennen das Problem aber nicht. Um dir helfen zu können musst du das schon genauer beschreiben.

Beim Anschauen des Quelltextes fällt mir auf, das du als Doctype zwar HTML5 angibst, dich aber nicht an die HTML5-Regeln hälst. Du hast doppelte Inhalte und viele vollkommen überflüssige Container. Dazu noch Klassen ohne Ende. Sowas hat in HTML5 nichts verloren. Schon allein dadurch ergeben sich viele Probleme.
Die Bilder habe ich im überigen alle nocheinmal deutlich kleiner gemacht (stärker komprimiert).
Bitte zeige mir die HTML5 Fehler (bis auf die mit den überflüssigen Containern), da ich diese bisher nicht finden konnte, auch nicht mit irgend welchen online Testern.

Also es geht bei meinem Problem um alle mobilen Geräte und alle Browser.
Angefangen beim Iphone mit Safari, über Google Chrome (mobile), über Brave (mobile), über die ganzen anderen standard Browser auf allen Android Smartphones. Es wird überall falsch dargestellt.


Hier jetzt nocheinmal ein Bild von einem Samsung Handy.


5172

Und so sollte es eigentlich aussehen:

5173

Aufgenommen von dieser Webseite:
http://www.responsive.cc/index
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.399
274
83
66
Bin nicht mehr der jüngste und meine Augen nicht mehr die besten :D Wie meine Vorredner kann ich die Fehler nicht entdecken, auch nicht beim Vergleich der beiden Bilder.
 

DerNeuling21

Mitglied
15 September 2017
58
1
8
19
Der Fehler ist der Hintergrund, bei Android Geräten wird hinter dem Text immer neu das Hintergrundbild angezeigt und bei Iphone immer nur so ein snipp Shot Schnipsel. In wirklichkeit sollte man aber wie am PC über ein stehendes Hintergrundbild drüber scrollen.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.399
274
83
66
Alles klar, offenbar verwendest Du background-attachment:fixed; und das ist auf den meisten Mobilbrowsern aus Performance-Gründen deaktiviert. Näheres siehe z. B. hier:
 

DerNeuling21

Mitglied
15 September 2017
58
1
8
19
Alles klar, offenbar verwendest Du background-attachment:fixed; und das ist auf den meisten Mobilbrowsern aus Performance-Gründen deaktiviert. Näheres siehe z. B. hier:
Ich bekomme es aber irgendwie nicht hin.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.399
274
83
66
Meine Empfehlung: Akzeptieren, dass das, was die Entwickler der mobilen Browser machen, Hand und Fuß hat und auf dieses Feature verzichten. Ich hatte vor einiger Zeit auch Mal versucht, das Ganze mit Javascript nachzubilden, aber ohne Erfolg. Solche Versuche werden anscheinend genau so geblockt.
 

DerNeuling21

Mitglied
15 September 2017
58
1
8
19
Meine Empfehlung: Akzeptieren, dass das, was die Entwickler der mobilen Browser machen, Hand und Fuß hat und auf dieses Feature verzichten. Ich hatte vor einiger Zeit auch Mal versucht, das Ganze mit Javascript nachzubilden, aber ohne Erfolg. Solche Versuche werden anscheinend genau so geblockt.
Ich habe jetzt einmal die ganze Seite mit Google Chrome DevTools "Remote devices" auseinander genommen. Die mobile Browser nehmen zwar "background-attachment: fixed" an, können aber damit irgendwie nicht umgehen.
Da muss es doch eine Lösung geben?
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.399
274
83
66
Bei Stackoverflow, siehe Link oben, sind Workarounds angegeben. Ich erinnere mich, vor längerer Zeit so etwas versucht zu haben, mit dem Ergebnis, dass es ebenfalls geblockt wurde.
 
Werbung: