Support » Themes » Hintergrund bei Twenty Twenty-One auf dem iPhone kritisch

Hintergrund bei Twenty Twenty-One auf dem iPhone kritisch

  • ysurano

    (@ysurano)


    vor 1 Monat, 3 Wochen

    Hi! 🙂

    Ich habe eine Website gestaltet mit Twenty Twenty-One und bin auch recht zufrieden. Die Website ist https://www.coldsilence.de.

    Hier wollte ich insbesondere erreichen, dass es zwei Hintergründe gibt, einen für Mobile und einen für Desktop. Zusätzlich sollen die Hintergründe fixed sein, also nicht mit scrollen, und skalieren auf die tatsächliche Größe des Bildschirms.

    Das klappt auch sehr gut, jedenfalls auf allen Desktop-Geräten (inkl. MacBooks), und auf allen Android Geräten. Aber iPhone Geräte sträuben sich. Bei iPhones ist der Hintergrund extrem herangezoomt und scrollt auch mit. Das sieht schrecklich aus.

    Folgenden Javascript-Code vor dem schließenden <body>-Tag in der footer.php nutze ich, um zu erreichen was ich erreichen möchte (und was auf fast allen Devices eben gut klappt):

    <script>
  function updateBackgroundImage() {
    var desktopImage = 'http://coldsilence.de/wp-content/uploads/2023/03/UpscaledDesktop-scaled.jpeg';
    var mobileImage = 'http://coldsilence.de/wp-content/uploads/2023/03/UpscaledMobile-scaled.jpeg';
    var breakpoint = 1000;
    
    if (window.innerWidth >= breakpoint) {
      document.body.style.backgroundImage = 'url(' + desktopImage + ')';
      document.body.style.backgroundAttachment = 'fixed';
    } else {
      document.body.style.backgroundImage = 'url(' + mobileImage + ')';
      document.body.style.backgroundAttachment = 'fixed';
    }

    document.body.style.backgroundSize = 'cover';
    document.body.style.backgroundPosition = 'center center';
    document.body.style.backgroundRepeat = 'no-repeat';
  }

  function updateLogoAlignment() {
    var breakpoint = 1000;

    var logo = document.querySelector(".site-logo .custom-logo-link img");
    if (!logo) return;

    if (window.innerWidth <= breakpoint) {
      logo.style.marginLeft = "auto";
      logo.style.marginRight = "auto";
      logo.style.display = "block";
    } else {
      logo.style.marginLeft = "0";
      logo.style.marginRight = "auto";
      logo.style.display = "block";
    }
  }

  window.addEventListener('resize', updateBackgroundImage);
  window.addEventListener('resize', updateLogoAlignment);
  window.addEventListener('DOMContentLoaded', updateBackgroundImage);
  window.addEventListener('DOMContentLoaded', updateLogoAlignment);
</script>

    Nicht wundern, hier ist auch Code dabei, der dafür sorgt, dass das Logo von uns auf Desktopgeräten linksbündig ist und bei Mobile mittig.

    Ich habe auch schon mit CSS versucht viel zu machen, aber das scheiterte sogar auf den meisten anderen Geräten. Mit der Javascriptlösung im Footer komm ich bisher am weitesten.

    Hat irgendwer eine Idee, was ich hier noch machen kann, um das Problem auf iPhones hinzubekommen?

    Vielen Dank!

    • Dieses Thema wurde geändert vor 1 Monat, 3 Wochen von ysurano.

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 1 Antwort (von insgesamt 1)
  • Moderator Bego Mario Garde

    (@pixolin)

    vor 1 Monat, 3 Wochen

    Hier wollte ich insbesondere erreichen, dass es zwei Hintergründe gibt, einen für Mobile und einen für Desktop.

    Das kannst du auch mit Media Queries in CSS erreichen, dafür brauchst du kein JavaScript.

    Allerdings möchten wir hier vor allem Anwendungssupport anbieten. Bei Fragen zur Programmierung bist du bei WordPress Stackexchange besser aufgehoben. Fragen zu CSS/JavaScript sind hier eher off topic.

Ansicht von 1 Antwort (von insgesamt 1)

Ansichten