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

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

QA

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

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

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

답변을 작성하시기 전에 로그인 해주세요.
전체 171
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT