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:
+1
-24
@@ -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
@@ -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
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user