У меня есть страница с центральным iFrame, окруженным двумя боковыми панелями слева / справа, и я пытаюсь сделать контент iFrame отзывчивым. У меня уже есть родительское окно с запросами @media в таблице стилей CSS, так что оно меняет компоновку при уменьшении ширины области просмотра (я работаю с экраном P C вниз, а не с мобильным экраном вверх). Это изменение макета (среди прочего) представляет собой переключение боковых панелей слева / справа на верх / низ относительно центра iFrame для мобильного представления.
Проблема заключается в области просмотра iFrame. Когда я использую максимальную ширину @ media в листе iFrame CSS, он использует внутреннюю ширину iFrame в качестве ширины области просмотра. Это вызывает у меня проблемы, потому что при переключении боковых панелей в родительском окне в верхнее / нижнее положение размер iFrame изменяется от ~ 540 пикселей в наименьшем настольном представлении до ~ 860 пикселей на самом большом мобильном представлении, поэтому я не могу установить @media запрос максимальной ширины без создания перекрытия с обеих сторон - отображение iFrame CSS, предназначенного для P C, на родительском мобильном телефоне CSS, или наоборот.
Я также предпочел бы не использовать max-device-width вместо этого, потому что тогда содержимое больше не реагирует на изменение размера окна browser на P C, поскольку оно относится к размеру экрана, а не к размеру окна браузера. (Это важно для меня, потому что это позволяет мне быстро протестировать отзывчивость и позволяет людям использовать страницу на не развернутой странице браузера.)
Есть ли способ сделать контент iFrame отзывчивым к размеру родительского окна, а не себя или экрана?
У меня есть контроль над всеми задействованными элементами, поэтому, если это невозможно, я также могу изменить iFrame на оператор PHP include и поместить таким образом содержимое центральной панели на странице.