iframe의 반응 형 페이지가 올바르게 렌더링되지 않습니다.

기본 페이지는 JQUERY SUPERSLIDES 플러그인으로 개발 된 반응 형 모바일 페이지를 포함합니다. 사파리가있는 IPHONE에 직접로드 된 모바일 페이지는 괜찮아 보입니다. 그러나 iframe에 포함될 때 IPHONE에서 예상대로 렌더링되지 않습니다 (아래의 두 번째 스크린 샷에서 볼 수 있듯이 이미지의 일부만 표시됨). 이 아이폰 사파리에 보이는 방법iframe의 반응 형 페이지가 올바르게 렌더링되지 않습니다.

enter image description here

:이 데스크톱 사파리와 크롬에 보이는 방법

main.html

<iframe id="ifrmadcontainer" seamless="seamless" scrolling="no" frameborder="0"  style="width:100%;height:100%;" src="touch.html"> 
    </iframe>

touch.html는 http://jsfiddle.net/w1vcrLy8/

에

enter image description here

출처

2014-11-21 vaj oja

JSFiddle이 손상되었습니다. 외부 리소스를 추가하십시오. 그리고 당신은 device-with에 기반한 미디어 쿼리를 사용한다고 가정합니다. 따라서 이것이 if 인 경우 iframe은 장치보다 작게 처리되지 않습니다. – KyleK

아무 문제없이 JSFiddle을 열 수 있습니다. –

미디어 쿼리를 사용하려고합니다. JSFiddle은 코드를보고 테스트 할 수 없다면 쓸모가 없습니다. 여기에 적어도 CSS가 필요합니다. 여기에 누락 된 모든 자료는 다음과 같습니다 CSS/normalize.css CSS/superslides.css CSS/layout.css 이미지/IMG_0410.JPG 이미지/IMG_0411.JPG 이미지/IMG_0412.JPG 자바 스크립트/JQuery와/jquery- 1.9.0.min.js 자바 스크립트/jquery.easing.1.3.js 자바 스크립트/jquery.animate-enhanced.min.js 자바 스크립트는/ 자바 스크립트/CSS jquery.superslides.js /정상화 hammer.min.js. css css/superslides.css css/layout.css – KyleK

메타 장치는 iframe 내부와 외부에 모두 포함되어 있습니까?

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

출처

2014-11-21 11:09:22 KyleK

예,이 메타 태그를 두 페이지에 모두 추가했습니다. –

iframe의 반응 형 페이지가 올바르게 렌더링되지 않습니다.

답변

관련 문제