АВТОСКЕЙЛ СТАНДАРТНЫХ БЛОКОВ 2
Чтобы изменить видимость на разных устройствах, посмотрите видео, там я лучше объясняю как работать с этим кодом
<script>
    var settings = {
        mobile: true,
        mobileDefault: true,
        tablet: true,
        pc: true,
        ultra: true
    };
    
    $(document).ready(function() {
        var blockIds = [];
        
        adjustScreenZoom(blockIds); 
        
        $(window).resize(function() {
            adjustScreenZoom(blockIds); 
        });
    });
    
    function adjustScreenZoom(blockIds) {
        var screenWidth = $(window).width();
        var zoomLevel = null; // Начальная установка в null
        
        console.log(screenWidth)
    
        // Проверка на соответствие ширине экрана и включен ли соответствующий флаг
        if (screenWidth > 0 && screenWidth <= 320 && settings.mobile) {
            zoomLevel = screenWidth / 320;
            console.log('применился на 320')
        } else if (screenWidth > 320 && screenWidth <= 480 && settings.mobileDefault) {
            zoomLevel = screenWidth / 480; 
            console.log('применился на 480')
        } else if (screenWidth > 480 && screenWidth <= 768 && settings.tablet) {
            zoomLevel = screenWidth / 768; 
            console.log('применился на 768')
        } else if (screenWidth > 768 && screenWidth <= 1190 && settings.tablet) {
            zoomLevel = screenWidth / 600; 
            console.log('применился на 768')
        } else if (screenWidth > 1190 && screenWidth <= 1200 && settings.pc) {
            zoomLevel = screenWidth / 1200; 
            console.log('применился на 1200')
        } else if (screenWidth > 1200 && settings.ultra) {
             zoomLevel = screenWidth / 1200; 
        }
    
        if (zoomLevel !== null) { // Применяем зум только если он определен
            blockIds.forEach(function(blockId) {
                $(blockId).css('zoom', zoomLevel);
                console.log(`Applied zoom: screenWidth=${screenWidth}, zoomLevel=${zoomLevel}`);
            });
        } else {
            console.log(`Zoom not applied: screenWidth=${screenWidth}`);
        }
    }
</script>
Понравилось решение?
Made on
Tilda