Есть ли способ изменить ширину Iframe для мобильного и настольного представления?

#html #css #iframe #media-queries

#HTML #css #iframe #медиа-запросы

Вопрос:

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

Если я установлю ширину тега iframe непосредственно на 700, это хорошо смотрится на рабочем столе, но не подходит для мобильного просмотра.

 <iframe src="....." frameborder="0" width="700" height="950">Your browser does not support embedded frames (iframes) <a href="...." target="_blank">further</a></iframe>

Обновление из моего CSS:

 @media screen and (max-width: 600px) {
  body {
    background-color: blue;
  }

 iframe {
   width: 700px;
 }
}

С наилучшими пожеланиями

1. Вы можете использовать css, например «iframe{width: 400px}» в медиа-запросе.

2. @IshitaRay Спасибо! Я пытаюсь это знать

3. Пожалуйста, покажите нам ваш css-код и сделайте скриншот, как он выглядит…

4. Затем вы можете установить два iframe, один для мобильного и один для рабочего стола. В медиа-запросе, который вы пишете, css отображает только none или block.

5. Я пытаюсь решить проблему с css сейчас … до н.Э. у меня в моем проекте много файлов css.

Ответ №1:

Я нашел решение своей проблемы.

Я изменил тег iframe с

 <iframe src="....." frameborder="0" width="700" height="950">Your browser does not support embedded frames (iframes) <a href="...." target="_blank">further</a></iframe>

Для

 <iframe src="....." frameborder="0" width="100%" height="950">Your browser does not support embedded frames (iframes) <a href="...." target="_blank">further</a></iframe>

Единственное, что мне нужно было изменить, это просто ширина 100%. Iframe теперь на 100% адаптивный, а также имеет приятный мобильный вид рядом с видом рабочего стола.

Ответ №2:

Вы написали этот тег?

<meta name="viewport" content="width=device-width, initial-scale=1.0">