Проверка HTML/CSS-блока на разных размерах
Вставьте HTML-фрагмент и связанный с ним CSS, чтобы мгновенно увидеть, как он выглядит на телефоне, планшете и компьютере, в изолированном окне (iframe в режиме sandbox), которое не может выполнять скрипты и получать доступ к вашей странице.
Как это работает
Введённые вами HTML и CSS собираются в небольшой автономный документ, который вставляется в тег <iframe> через атрибут srcdoc. Этот iframe работает в режиме «sandbox», то есть изолирован от остальной страницы: он не может выполнять скрипты (ни один <script> не разрешён) и не имеет доступа к остальному сайту, что защищает от любого риска вредоносной инъекции из вставленного содержимого. Выберите готовый формат (телефон, планшет, компьютер) или задайте свои ширину и высоту, чтобы проверить адаптивное поведение вашего блока.
Выполняется ли JavaScript в предпросмотре?
Нет, и это сделано намеренно: iframe работает в песочнице без разрешения allow-scripts, поэтому любой <script> во вставленном HTML будет проигнорирован. В предпросмотре отображаются только HTML-разметка и применённый CSS.
Можно ли проверять CSS media queries?
Да: правила @media в вашем CSS применяются как обычно, в зависимости от ширины, заданной для предпросмотра (готовый пресет или своё значение), точно так же, как в настоящем браузере при изменении размера окна.
Ваши HTML и CSS никогда не отправляются на сервер: предпросмотр формируется целиком в вашем браузере, локально.