[ad_1]
Hi! 🙂
Ich habe eine Website gestaltet mit Twenty Twenty-One und bin auch recht zufrieden. Die Website ist .
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 Stunde, 48 Minuten von .
Die Seite, fĂĽr die ich Hilfe brauche: [Anmelden, um den Link zu sehen]