Cover-Darstellung auf dem iPad nicht responsiv

[ad_1]

Hallo,
ich kenne das Problem und konnte das auf einem älteren iPad reproduzieren.

Bei einem Projekt, bei dem ich allerdings das Block Theme Twenty Twenty-Three eingesetzt habe, habe ich den folgenden Code verwendet, der m. E. das Problem erledigt:

/* wegen Problem mit ios */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (-webkit-min-device-pixel-ratio: 2) {
.wp-block-cover__background {
  background-attachment: scroll;
}
}

Bei einem klassischen Theme wie Blocksy kannst du den Code nach entsprechender Anpassung unter Design > Customizer > Zusätzliches CSS einfügen. Allerdings kann es sein, dass der Hintergrund dann nicht auf jedem Gerät fixiert ist. Aber das Foto sieht auf jeden Fall nicht mehr verpixelt aus.

Allerdings bin ich mit der Lösung auch nicht so ganz zufrieden und werde mich damit noch mal weiter beschäftigen.

Viele Grüße
Hans-Gerd

Hallo Hans-Gerd,
danke für deine Mühe. Das wars leider nicht. Von dem Bild wird auf dem iPad immer noch ein verpixelter Ausschnitt gezeigt.

Ich habe mir das auf deinem Projekt auch noch mal angesehen. Dort sehen die Bilder prima aus, stehen aber fest. (sehr chick übrigens mit dem abgesofteten unteren Bereich). Damit könnte ich leben.

Schöne Grüße, Inga

Hallo,
ich konnte den Code auf deiner Website allerdings in der developer console auch nicht entdecken
Teste das doch bitte noch mal mit dem folgenden Code, bei dem ich den Selektor geändert habe:

/* wegen Problem mit ios */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (-webkit-min-device-pixel-ratio: 2) {
.wp-block-cover.alignfull.is-light.has-parallax{
  background-attachment: scroll;
}
}

Lasse aber bitte den Code dann unter zusätzliches CSS, damit ich das prüfen und ggfs. auch anpassen kann.

An dieser Stelle möchte ich aber noch darauf hinweisen, dass wir hier bei WordPress-Fragen helfen. CSS-Probleme gehören in der Regel nicht dazu, auch wenn wir je nach Zeit mal entsprechende Tipps geben.
Eine gute Möglichkeit, sich mit CSS zu beschäftigen, findest du z. B. hier, hier oder hier. Hier noch ein Link zu einem Hilfe- und Austausch-Forum für (u. a.) CSS -> Forum.

Viele Grüße
Hans-Gerd

Nachtrag:

(sehr chick übrigens mit dem abgesofteten unteren Bereich).

Danke – freut mich, dass es dir gefällt. 😊

Hallo Hans-Gerd,

danke für den Code. Habe ich eingebaut in „zusätzliches CSS“ eingebaut. Sieht noch genauso doof aus, wie vorher.

Danke auch für den Hinweis, dass bei CSS-Problemen eigentlich nicht geholfen wird. (CSS steht schon lange auf meiner To-Learn-Liste). Ich halte dieses Phänomen nach wie vor für ein WP-Problem in punkto Responsivität.
Oder es liegt am iPad. Ich bin schon die ganze Zeit auf Fehlersuche außerhalb vom WP. Gerade habe ich gesehen, dass es ein neues Update gibt. Das installiere ich gerade. Vielleicht ist das die Fehlerquelle …

Schöne Grüße, Inga

Hallo,

Ich halte dieses Phänomen nach wie vor für ein WP-Problem in punkto Responsivität.

nein, das ist offensichtlich ein allgemein bekanntes Problem, wie du z. B. hier siehst.

In dem folgenden Issue wird noch eine andere Alternative beschrieben, die ich allerdings noch testen muss.

Während der Entwicklung bzw. Fehlersuche solltest du kein Cache-Plugin aktiviert haben.
Kannst du das bitte prüfen.

Der Website-Bericht wäre hilfreich: Du findest unter Werkzeuge > Websitezustand > Info einen Bericht zur Website. Warte bitte einen Moment bis die Ladeanzeige ganz oben abgeschlossen ist und kopiere dann per Button den Website-Bericht in deine Zwischenablage. Über den Button „Bericht in die Zwischenablage kopieren“ kannst du den Bericht unverändert (bitte mit den Akzentzeichen am Anfang und Ende) einfügen und anschließend hier posten. Evtl. ergeben sich dann weitere Anhaltspunkte, ob und wo das Problem liegt.

Viele Grüße
Hans-Gerd

[ad_2]

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer