휴대폰 용 반응 형 iframe

모바일 장치에서 iframe을 작동시키는 데 상당히 문제가 있습니다. 화면의 절반 이상 만 덮고 있습니다. 나는 그것이 내 iframe에 넣어 CSS의 일부 라인 때문에 용의자.휴대폰 용 반응 형 iframe

.Wrapper2 { 
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 */ 
    padding-top: 25px; 
    height: 0; 
} 
.Wrapper2 iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

나는 또한 나의 텍스트에 대한 것을 추가 할

, 나는 뷰포트 크기를 사용하고 (폭스 바겐, VH, VMIN, VMAX) 나는 또한 텍스트의 긴 블록에 문제가 무엇입니까로 그 어떤 도움이 될 것입니다 경우 스크롤바 제작. 나는 또한 (if) 내 iframe CSS 및/또는 텍스트 사이징으로 무언가를해야 할 수도 있다고 생각합니다. 구현해야하는 필요한 변경 사항은 무엇입니까? 미리 감사드립니다.

출처

2017-03-28 Paul Nadera

여기 코드가 충분하지 않기 때문에 문제를 보여주는 피들을 제공 할 수도 있지만 추측을해야한다면 선택기에 'display'유형을 설정하고 ' width '를'.Wrapper2'에서 찾았지만, 말한 것처럼 더 많은 코드를 보지 않고서는 알기가 어렵습니다. – Slime

문제가 무엇인지 쉽게 이해할 수 있도록 html을 게시하십시오.

이 시도 - 당신은 HTML에서 iframe을 들여다 경우에 당신이 확인할 수있는 것들 :

<iframe width="560" height="315" src="https://www.youtube.com/embed/HDI9inno86U" frameborder="0" allowfullscreen></iframe>

그래서, & 높이가 이미 iframe 요소 내에 정의 폭이있다. 당신이해야 할 모든 것은 width="100%"으로 바꿉니다;

출처

2017-03-28 12:57:14

이것이 반드시 필요한 것은 아닙니다. – Roberrrt

휴대폰 용 반응 형 iframe

답변

관련 문제