Заставить элемент div «думать», что экран с определенной шириной? - PullRequest
0 голосов
/ 25 февраля 2019

Интересно, есть ли способ заставить элемент думать, что область просмотра имеет определенную ширину?

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

Если бы был способ «обмануть» элементы теста разметки, думая, что область просмотра имеет определенную ширину, ручное перетаскивание окна браузера не было бы необходимым.

Одна возможность, хотяЯ сомневаюсь, что это реализовано, для инструментов разработчика браузера, чтобы показать API, который позволил нам выбрать и сообщить браузеру, что определенные элементы должны считать браузер визуализированным с определенным размером области просмотра ...

A Way

Во время игры с этим тестом Я случайно обнаружил, что есть способ инициировать медиазапросы без инструментов разработчика, а именно масштабировать область просмотра с помощью ctrl +.Это вызовет медиазапросы, хотя и не с декларативной точностью, которую я ищу.

1 Ответ

0 голосов
/ 25 февраля 2019

Положите его в <iframe>.Этот тег создает новый контекст окна, с шириной которого сравниваются медиа-запросы.Ширина iframe может управляться для эмуляции устройств различной ширины, в этом примере:

https://codepen.io/anon/pen/jJNyJd

<iframe> используется тестером изменения размера устройства Material Design для эмуляции различных экрановразмеры в браузере:

https://material.io/tools/resizer/

Насколько я знаю, это единственный способ сделать это.

...