m/onepager
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

mAi: #7 - Mobile-Gating: Touch-Fix nur unter 768px

Browse Source 
CSS touch-action: pan-y und JS-Listener-Scope (wrapper statt hero,
ohne preventDefault) jetzt explizit per @media / matchMedia auf
max-width: 768px begrenzt. Über 768px bleibt das ursprüngliche
Verhalten erhalten — touchmove auf .hero mit preventDefault, falls
Touch-Hardware im Desktop-Layout im Spiel ist.
This commit is contained in:
mAi
2026-04-27 20:08:25 +02:00
parent 66d0203f55
commit 095ed0fccf
1 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
sites/smartin3.de/index.html
View File

@@ -93,7 +93,9 @@
margin: 0 auto 40px; margin: 0 auto 40px;
display: flex; justify-content: center; display: flex; justify-content: center;
padding: 60px 40px; padding: 60px 40px;
touch-action: pan-y; }
@media (max-width: 768px) {
.text3d-wrapper { touch-action: pan-y; }
} }
.text3d { .text3d {
@@ -686,9 +688,16 @@
} }
hero.addEventListener('mousemove', function(e) { handleMove(e.clientX, e.clientY); }); hero.addEventListener('mousemove', function(e) { handleMove(e.clientX, e.clientY); });
wrapper.addEventListener('touchmove', function(e) { if (window.matchMedia('(max-width: 768px)').matches) {
handleMove(e.touches[0].clientX, e.touches[0].clientY); wrapper.addEventListener('touchmove', function(e) {
}, {passive: true}); handleMove(e.touches[0].clientX, e.touches[0].clientY);
}, {passive: true});
} else {
hero.addEventListener('touchmove', function(e) {
e.preventDefault();
handleMove(e.touches[0].clientX, e.touches[0].clientY);
}, {passive: false});
}
hero.addEventListener('mouseleave', function() { hero.addEventListener('mouseleave', function() {
text.style.animation = ''; text.style.animation = '';
text.style.transform = ''; text.style.transform = '';