답변 3개 / 댓글 1개
<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 이벤트를 넣어줘야 "진정한 반응형"이 됩니다.
답변에 대한 댓글 1개
psmjya아래 코드 사용하니 잘되네요^^;;
<script>
onresize = function() {
if (("win16win32win64macmacintel").indexOf(navigator.platform.toLowerCase()) < 0) {
divPlayer.style.width = "100%";
divPlayer.style.height = divPlayer.offsetWidth * 18 / 19 + "px";
}
}
onresize();
</script>
$('#frame').on('load', function() {
this.style.height=(this.contentWindow.document.body.scrollHeight)+'px';
});저런 느낌에 모바일인지 따지는 코드만 추가하면 되겠네요
답변을 작성하려면 로그인이 필요합니다.
그래도 답변주셔서 중간 중간 팁을 알아가게 되어 채택합니다^^