Изменение окна просмотра / ширины экрана js - PullRequest
Новая
       74

Изменение окна просмотра / ширины экрана js

0 голосов
/ 17 июня 2020

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

Я пытаюсь сделать это с помощью vanilla javascript, но борется. Я могу без проблем установить ширину тела, но медиазапросы bootstrap и css не учитывают установку ширины, поскольку она работает вне области просмотра / ширины экрана, которая остается неизменной.

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

Возможно ли это? Мое окно просмотра установлено как: 

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

, а медиа-запросы как: 

@media screen and (min-width: 992px) {}

1 Ответ

0 голосов
/ 17 июня 2020

Если я не ошибаюсь насчет вашего случая, у меня есть 2 рекомендации.

  • Используйте функцию open, чтобы открыть новое окно, которое полностью загружено в желаемое ширина и высота. Вы можете посмотреть здесь 

    var option_string = "location=yes,width=640,scrollbars=yes,status=yes";
var URL = "https://your_link.com";
var win = window.open(URL, "_blank", option_string );

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

    <body>
    <iframe id="your_site" src="https://your_link.com">
    <button class="btn btn_desktop">Desktop</button>
    <button class="btn btn_mobile">Mobile</button>
    <script>
        var $iframe = document.getElementById('your_site');
        var $resize_button = document.getElementByClass('btn');
        $resize_button.on('click', function(e){
            var $button = e.target;
            if (button.classList.contains('btn_desktop')) { // bigger your frame
                $iframe.style.width = '640px'; 
            } else {
                $iframe.style.width = 'auto';
            }
        })
    </script>
</body>

Надеюсь, это поможет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...