Anpassung für Mobilgeräte passt nicht

[DerNeuling21]

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]

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]

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]

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.

Firefox Send

Encrypt and send files with a link that automatically expires to ensure your important documents don’t stay online forever.

send.firefox.com

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

 

[Sailor]

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]

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]

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.




Und so sollte es eigentlich aussehen:



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

 

[DerNeuling21]

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.

 

[DerNeuling21]

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:

How to replicate background-attachment fixed on iOS

I'm trying to get fixed-background-image divs working on iOS for a school project. I've been using background-attachment: fixed; But this is leading to weird sizing and no scrolling effects in mo...

stackoverflow.com

Ich bekomme es aber irgendwie nicht hin.

 

[DerNeuling21]

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?

 

[DerNeuling21]

Das ist nicht ganz zutreffend: Sie können sehr wohl damit umgehen, nur was sie damit tun ist nicht das, was Du dir wünschst: Sie blocken das Ganze, das ist wo gewollt.

kann ich das irgendwie umgehen ?

wie mache ich am Besten einen Workaround dafür ?