Ответы пользователя по тегу Адаптивный дизайн
  • Как открыть лайтбокс на мобильном устройстве?

    Bobert88
    @Bobert88
    Vice President of Javascript, very important guy.
    Привет, посмотрел в custom.js файле и в функции pixflow_portfolioPopup проверяется, что ширина экрана не менее 1024 пикселей, прежде чем открывать попап.

    Чтобы попап заработал на мобильном, нужно поправить функцию вот так:

    function pixflow_portfolioPopup() {
        'use strict';
    
        $('body').on('click',".inside .item-wrap.portfolio-popup",function(e){
            var element= e.target || e.srcElement;
            if ((e.which != 2) ) { // <-- убрал проверку ширины экрана здесь.
                if (element.attributes.class.nodeValue.indexOf('icon') < 0) {
                    $.magnificPopup.open({
                        items: {
                            src: $(this).find(".item-image").attr('data-src')
                        },
                        overflowY:'scroll',
                        type: 'image',
                        closeOnContentClick: false,
                        closeBtnInside: false,
                        mainClass: 'mfp-with-zoom mfp-img-mobile',
                        callbacks: {
                            beforeOpen: function () {
                            },
                            afterClose: function () {
                                $("html").css({'overflow-y': 'auto'});
                            },
                        }
                    }, 0);
                }
            }
        });
        $('body').on('click', ".outside .item-image.portfolio-popup", function () {
             //убрал проверку ширины экрана здесь.
                $.magnificPopup.open({
                    items: {
                        src: $(this).attr('data-src')
                    },
                    overflowY:'scroll',
                    type: 'image',
                    closeOnContentClick: false,
                    closeBtnInside: false,
                    mainClass: 'mfp-with-zoom mfp-img-mobile',
                    callbacks: {
                        beforeOpen: function () {
                        },
                        afterClose: function () {
                            $("html").css({'overflow-y': 'auto'});
                        },
                    }
                }, 0);
        });
    }


    К сожалению, в самом вордпрессе не силен, так что куда конкретно идти, чтобы поправить этот код, подсказать не могу.
    Ответ написан
  • Как bootstrap различает экраны?

    Bobert88
    @Bobert88
    Vice President of Javascript, very important guy.
    Есть там такой мета-тег:

    <meta name="viewport" content="width=device-width">


    В данном случае viewport обозначает экран браузера, а для атрибута content устанавливается ширина экрана браузера, равная ширине экрана смартфона. То есть браузерам мобильных устройств, склонным к уменьшению масштаба, предписывается этого не делать, настроив ширину экрана на текущую ширину дисплея смартфона.
    - Большая книга CSS.

    А вот здесь можно посмотреть про ширину экранов: mydevice.io/devices
    Ответ написан
    Комментировать