모바일에서 ifame 크기 자동조절 되도록

모바일에서 ifame 크기 자동조절 되도록

QA

모바일에서 ifame 크기 자동조절 되도록

답변 3

본문

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 이벤트를 넣어줘야 "진정한 반응형"이 됩니다.

아래 코드 사용하니 잘되네요^^;;

<script>
onresize = function() {
    if (("win16win32win64macmacintel").indexOf(navigator.platform.toLowerCase()) < 0) {
        divPlayer.style.width = "100%";
        divPlayer.style.height = divPlayer.offsetWidth * 18 / 19 + "px";
    }
}
onresize();
</script>

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 171
© SIRSOFT
현재 페이지 제일 처음으로