установка ориентации экрана, ширины и высоты с помощью javascript

Можно ли вручную установить свойства экрана динамически генерируемого iframe? хотел бы задать ориентацию, ширину и высоту, чтобы имитировать «мобильный» вид для этого iframe?установка ориентации экрана, ширины и высоты с помощью javascript

Я создал два отдельных скрипок:

Родителя: https://jsfiddle.net/mooioom/69240vec/

"устройство": https://jsfiddle.net/mooioom/19tsk4L8/

родителя открытие IFRAME, указывающую на "устройство" с Iphone разрешающая способность 375x667
«устройство» имеет медиа-запрос в соответствии с разрешением iphone и следует изменить цвет кнопки от зеленого до желтого, если это обнаружено, что не происходит, вероятно, из-за обнаруженных измерений и screen.height.

так, как я могу установить screen.width и screen.height от «устройства» во время создания от родителя.

--- обновление ---

так, как указано Gezzasa, если медиа-запрос min-device-width изменяется на min-width он работает, но для того, чтобы получить полное решение, которое я все еще хотел бы знать, как сделать iframe «верят», что он работает внутри мобильного устройства, я прочитал в сообщении, что он включает в себя изменение заголовков и пользовательского агента, потому что некоторые методы реагирования нацелены на пользовательский агент, чтобы проверить, является ли его мобильным.

, что отложить в сторону, вопрос до сих пор стоит, как динамически установить screen.width и screen.height (и ориентации) для фрейма, из родительского окна

источник

2017-01-25 levi

Можете ли вы редактировать содержимое iframe? Подумайте о простых медиа-запросах на конкретной странице. – Gezzasa

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

Я мог понимать неправильно. Этот пример http://www.w3schools.com/tags/tag_iframe.asp создаст iframe. Ширина и высота крошечные (по умолчанию) и показывают мобильную версию www.w3schools.com, потому что медиа-запросы, размещенные на w3schools, делают это именно так. Являются ли ваши запросы к медиа в правильном домене, и у вас есть ширина и высота, установленные для iframe, которые попадают под медиа-запросы? Если нет, я боюсь, что не смогу вам помочь, если вы не сможете воссоздать его в jsfiddle. – Gezzasa

Проблема с запросом заключается в том, что iframe не загружается с устройства, поэтому «min-device-width» не будет работать, поскольку это не устройство. Если вы измените его на «минимальную ширину» и «максимальную ширину», оставив устройство, оно должно работать.

источник

2017-01-25 09:56:57 Gezzasa

надеюсь, что это поможет вам

var view=document.getElementById("view"); 
 

 
var ifrm = document.createElement('iframe'); 
 
ifrm.setAttribute('id', 'ifrm'); 
 
view.appendChild(ifrm); 
 
var ifrmId=document.getElementById("ifrm"); 
 
ifrmId.style.width="200px"; 
 
ifrmId.style.height="200px";

<div id="view"> 
 

 
</div>

источник

2017-01-25 08:11:02

Спасибо! но на самом деле это то, что я уже делаю. моя проблема не в физическом измерении iframe, iframe.document и т. д. является объектом iframe.screen, который, по-моему, нацелен на медиа-запрос ... – levi

установка ориентации экрана, ширины и высоты с помощью javascript

ответ

Смежные вопросы