feat: hide zoom control on mobile devices

- Hide zoom control on mobile viewports (≤768px) via CSS
- Skip loading saved zoom on mobile, always use 100%
- Add resize handler to reset zoom when switching to mobile view
- Clean up unnecessary mobile-specific zoom styles
- Prevents confusion on touch devices where zoom is less useful
This commit is contained in:
juanatsap
2025-11-12 15:05:29 +00:00
parent 3646475208
commit c89bb43fc8
2 changed files with 31 additions and 26 deletions
+1 -24
View File
@@ -3642,30 +3642,7 @@ html {
/* Mobile Responsive - Smaller on mobile */
@media (max-width: 768px) {
.zoom-control {
bottom: 50px;
padding: 0.4rem 0.8rem;
gap: 0.4rem;
}
.zoom-slider {
width: 140px;
}
.zoom-value {
font-size: 0.7rem;
min-width: 25px;
}
.zoom-value-current {
font-size: 0.8rem;
min-width: 30px;
}
.zoom-reset-btn {
min-width: 38px;
min-height: 38px;
font-size: 0.7rem;
padding: 0.4rem;
display: none; /* Hide zoom control on mobile - not useful on small screens */
}
}
+30 -2
View File
@@ -258,9 +258,17 @@
// ZOOM CONTROL
// =============================================================================
/**
* Check if we're on mobile viewport
* @returns {boolean} True if mobile (viewport <= 768px)
*/
function isMobileView() {
return window.innerWidth <= 768;
}
/**
* Initialize zoom control on page load
* Restores saved zoom level from localStorage
* Restores saved zoom level from localStorage (desktop only)
*/
function initZoomControl() {
const slider = document.getElementById('zoom-slider');
@@ -269,7 +277,14 @@
if (!slider || !cvPaper) return;
// Restore saved zoom level
// On mobile, always use 100% zoom (zoom control is hidden anyway)
if (isMobileView()) {
slider.value = 100;
applyZoom(100, false);
return; // Skip event listeners on mobile
}
// Desktop: Restore saved zoom level from localStorage
const savedZoom = localStorage.getItem('cv-zoom');
if (savedZoom) {
const zoomValue = parseInt(savedZoom, 10);
@@ -311,6 +326,19 @@
}
}
});
// Handle window resize - reset zoom when switching to mobile
let resizeTimeout;
window.addEventListener('resize', function() {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function() {
if (isMobileView()) {
// Reset to 100% zoom when switching to mobile
slider.value = 100;
applyZoom(100, false);
}
}, 250); // Debounce resize events
});
}
/**