ios 장 치 는 iframe 너비 가 화면 을 초과 하 는 해결 방법 을 사용 합 니 다.

장면
회사 홈 페이지 h5 프로젝트 를 하 다가 iframe 이 애플 X 휴대 전화 오른쪽 에서 화면 을 넘 어 서 는 문 제 를 만 났 는데 마치 잘 린 것 처럼 느껴 졌 지만 다른 휴대 전화 에 서 는 정상 으로 나 타 났 다.
분석 하 다.
문제 원인:페이지 a 는 iframe 을 이용 하여 b 를 삽입 하 는 동시에 iframe 의 너 비 를 100%로 설정 하지만 페이지 b 의 실제 너 비 는 외부 설정 의 100%보다 크다.
정상 적 인 상황 에서 페이지 b 의 디 스 플레이 폭 은 외층 에 부 여 된 100%여야 하지만 ios 에 서 는 iframe 내 실제 너비 가 외층 이 주 는 너비 보다 클 때 표시 하 는 폭 은 실제 너비 입 니 다.
해결 하 다.
1.iframe 의 바깥쪽 div 에 스타일 추가:overflow: auto;-webkit-overflow-scrolling:touch;width:100%;2.iframe 에 속성 설정scrolling='no'3.iframe 에 스타일 설정:width: 1px; min-width: 100%; *width: 100%;

<div style="overflow: auto;-webkit-overflow-scrolling:touch;width:100%;">
 <iframe height="100%" scrolling="no" style="width: 1px; min-width: 100%; *width: 100%;" src="https://juejin.im/timeline">
 </iframe>
</div>

첨부:iframe 은 IOS 에서 폭 에 어떻게 적응 합 니까?
iframe 자동 으로 넓 어 져 IOS 핸드폰 에 스크롤 바 가 나타 납 니 다.
첫 번 째 단계:iframe 의 scrolling 속성 을 no 로 정의 하고 iframe 에 스크롤 바 가 표시 되 지 않도록 설정 합 니 다.

<iframe scrolling="no" ></iframe>

두 번 째 단계:iframe 의 스타일 을 다음 과 같이 설정 합 니 다.

iframe{
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  min-width: 100%;
  *width:100%;
  width:1px;
}

총결산
이상 은 이 글 의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가 치 를 가지 기 를 바 랍 니 다.여러분 의 저희 에 대한 지지 에 감 사 드 립 니 다.