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

  • 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)
  • 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)