모바일에서 ifame 크기 자동조절 되도록
본문
PC web홈페이지 main에
visual slider를 지우고 iframe으로 유투브동영상을 넣었더니 모바일에서 홈페이지 접속시 동영상 부분 화면만 프레임을넘어가서 보이는데
PC에서는 메인에 꽉차게 동영상이 보여지게 그대로 두고 모바일 사이즈만 조절되도록 어떻게 설정해야할까요?
답변 3
<iframe id="my" ....></iframe>
위와 같다고 가정하고 미디어쿼리 css 를 활용한다면
<style>
#my { width:1280px; } // pc
@media screen and (hover:none) and (pointer:coarse) {
#my { width:400px; } // 모바일
}
</style>
------------
자바스크립트를 사용한다면
<script>
pcm = "win16win32win64macmacintel";
if (pcm.indexOf(navigator.platform.toLowerCase()) < 0) {
my.style.width = "400px";
} else {
my.style.width = "1280px";
}
</script>
저 같으면 3항문으로 줄여서
<script>
pcm = "win16win32win64macmacintel";
my.style.width = (pcm.indexOf(navigator.platform.toLowerCase()) < 0 ? 400 : 1280) + "px";
</script>
그런데 사실 이건 미봉책입니다. 모바일 세로모드 가로모드 전환시에 따른 리사이징이 빠져 있으니까요.
상황에 따라 적절하게 onresize 이벤트를 넣어줘야 "진정한 반응형"이 됩니다.
제가 잘 적용할 줄 몰라서 못쓰는건지.. 저는 실행이 안되던데요...'';;;
그래도 답변주셔서 중간 중간 팁을 알아가게 되어 채택합니다^^
$('#frame').on('load', function() {
this.style.height=(this.contentWindow.document.body.scrollHeight)+'px';
});
저런 느낌에 모바일인지 따지는 코드만 추가하면 되겠네요
아래 코드 사용하니 잘되네요^^;;
<script>
onresize = function() {
if (("win16win32win64macmacintel").indexOf(navigator.platform.toLowerCase()) < 0) {
divPlayer.style.width = "100%";
divPlayer.style.height = divPlayer.offsetWidth * 18 / 19 + "px";
}
}
onresize();
</script>