오버플로에도 불구하고 Android 브라우저 너비가 iframe 콘텐츠 너비로 늘어났습니다. 숨김

Question

Android (돌고래 브라우저)에서 바탕 화면 스타일의 iframe을 모방하려고합니다. 사용 된 트릭은 고정 크기 및 overflow:hidden; 인 <div> 안에 position:relative;이있는 을 넣은 다음 jQuery Mobile (또는 vmouse 이벤트)을 사용하여 스크롤 할 마우스 이벤트를 처리하는 것입니다.

이 모든 것은 한 가지를 제외하고는 잘 작동합니다. 이 잘린 경우에도 내용이 브라우저 크기에 맞게 펼쳐집니다. 이것은 주로 키가 뚜렷합니다. http://jsfiddle.net/euKhG/

을 그리고 여기에 안드로이드 브라우저에서 볼 수있는 결과이다 :

여기 JSFiddle에 간단한 예제 코드입니다 http://jsfiddle.net/euKhG/embedded/result/는 (전용 안드로이드 브라우저에서 작동합니다!).

누구든지이 문제를 해결하는 방법을 알고 있습니까? 나는 다른 곳에서 iScroll과 유사한 것을 보았지만 이것들은 리모콘으로 프레임을 만지는 것 같다. src 이렇게.

Answer 1

음, 여기 뭔가를 놓친 것 같아요. 지금 당신의 iFrame은 잘려 가고 있습니다 만, overflow : scroll을 설정하거나 컨테이너 프레임의 너비/높이 속성을 설정했기 때문에가 아닙니다. 현재보고있는 컷오프는 완전히 임의적입니다.

이것을 증명하려면 background div : # ff0000을 컨테이너 div에 추가하면 div의 너비/높이가 iframe의 컷오프 영역을 정의하는 것이 아니라 '기본'iframe 크기 속성 : http://jsfiddle.net/kauUr/

귀하의 div가 고정 된 크기라고 가정하면, 같은 크기의 너비/높이 속성이있는 iframe을 설정하여 일치 시키십시오. 폭과 높이 속성을 사용하여이 작업을 수행하거나 컨테이너 div에 대해 수행 한 css justas를 사용하여보다 명확하게 수행 할 수 있습니다. iFrame에 올바른 너비/높이를 지정하면 컷오프가 예상 한 것과 일치해야하며 브라우저는 iframe 내용의 크기가 아니라 지정된 크기로 스크롤해야합니다. 실제로 div의 크기를 미리 알지 못하더라도 자바 스크립트를 사용하여 인수를 얻은 다음 런타임에 iFrame의 크기를 올바르게 지정할 수 있습니다.

<div style="width: 400px; height: 400px; overflow: scroll; background:#ff0000"> 
    <iframe style="width: 400px; height: 400px" src="http://doc.jsfiddle.net" frameborder="0" scrolling="no"></iframe> 
</div>​ 

그리고 문제가 해결되지 않을 경우,뿐만 아니라 iframe이 스타일에 overflow:none 두드림보십시오.

Answer 2

은 메타 태그

<meta id="viewport" name="viewport" content="initial-scale=1, user-scalable=no, width=device-width, target-densitydpi=160dpi"/> 

에 목표 densitydpi을 설정하려고하지만 당신은뿐만 아니라