5

Вопрос по jquery, html, css, responsive-design, media-queries – Как «солгать» медийному запросу? Как подделать ширину окна?

Я занимаюсь разработкой адаптивных сайтов, и вы все знаете, немного неудобно вручную уменьшать окно браузера (более того, Firefox не позволяет мне делать это после значения). Поэтому я решил написать «плагин» jQuery, чтобы уменьшить область кнопками - или +.

Однажды я написал это:

$(document).ready(function() {
    var doResizing = function(increaseWith) {
        if ($('#xxxx').length == 0) {
            $('body').css('margin', 0).css('padding', 0);
            $('body > *').wrapAll('<div id="xxxx" /></div>');

            $('#xxxx').css('background-color', 'red')
                .css('overflow', 'scroll')
                .css('padding', 0)
                .css('margin', 0)
                .css('position', 'absolute')
                .width('100%');
        }
        $('#xxxx').height(parseInt($(window).height()) + 'px').width(parseInt($('#xxxx').width())+increaseWith + 'px');
    }

    $(document).keypress(function(e) {
        if (e.which == 45) {
            doResizing (-10);
        }

        if (e.which == 43) {
            doResizing (+10);
        }
    });
});

это нормально для проверки, но даже с правильным определением медиа-запроса, он не купит его. Тогда как сказать медиазапросу, что ширина изменилась без изменения размера окна?

о, я даже не знал об этом, но в этом случае нет прокрутки по вертикали

от John Smith

Использование Ctrl + Shift + M в FireFox недостаточно хорошо?

от Avisari

потому что если все же легче нажимать + или - вместо прикосновения к мыши :)

от John Smith

Могу я спросить, что не так с изменением размера самого окна? :ИКС

от MackieeE

Примечание: если вы используете Chrome, вы можете эмулировать меньший экран в инструментах разработчика

от Bigood
4 ответа
9

Проблема в том

что медиа-запрос все еще видит страницу во всю ширину. Вы можете немного адаптировать свой код, чтобы он брал страницу, вставлял ее в iframe и изменял размер iFrame:

var doResizing = function (increaseWith) {
     if ($('#xxxx').length == 0) {
            $('body').css('margin', 0).css('padding', 0);
            $('body > *').wrapAll('<iframe id="xxxx" src="' + window.Location + '" /></iframe>');
            $('#xxxx').css('background-color', 'red').css('overflow', 'scroll').css('padding', 0).css('margin', 0).css('position', 'absolute').width('100%');
    }
    $('#xxxx').height(parseInt($(window).height()) + 'px').width(parseInt($('#xxxx').width()) + increaseWith + 'px');
}

Делая это удалил все стили с моей страницы. Есть ли причина для этого?

от Gwater17

да, включение в IFRAME решило мою проблему

от John Smith
9

Chrome имеет встроенную функцию для этого:

Если вы не видите настройки, перейдите по ссылке:
Settings > Devices > [Choose your devices]

@AdrianEnriquez Проверьте мои правки ..

от h0ussni

Я вижу только консоль и поиск в моем Chrome. Я что-то пропустил?

от Adrian Enriquez
4

В Firefox -

Tools / Web Developer / Responsive Design View

Или просто ударилCtrl + Shift + M

Это позволит вам перейти к небольшому размеру порта просмотра, а также уменьшит полосу прокрутки и наложить ее - так что вам не придется с этим иметь дело. (это там, просто очень маленький, как мобильный)

Создавайте заранее заданные размеры, переключайте ориентацию - хорошо туз.

Извинения, только что видел это в комментарии, в любом случае ..

3

Существует дополнение для Firefox, которое делает это:

https://addons.mozilla.org/de/firefox/addon/more-display-resolutions/

+1, звучит хорошо для меня тоже, не знал, что это для Firefox.

от h0ussni

звучит хороший ответ для меня [email protected]: хотите поделиться своими мыслями ????

от NoobEditor

Похожие вопросы