반응 형 웹 사이트의 IE 렌더링 문제

Question

This responsive page (및 유사)은 Chrome에서 Firefox에서 제대로 작동하지만 브라우저 창을 작게 만들면 IE에서 제대로 표시되지 않습니다.

뷰포트의 크기가 너무 넓어서 이미지의 크기가 너무 작아 보이지 않습니다.

이것은 데스크톱 IE에서별로 문제가되지 않지만 Windows Phone 사용자가 웹 페이지를 제대로 볼 수 없다는 것을 의미합니다.

IE의 최신 버전이 이러한 문제를 해결했다고 생각 했습니까?

이 문제의 원인을 아는 사람이 있습니까?

Answer 1

너비가 작은 미디어를 다루는 경우 열의 부동을 비활성화해야합니다. 즉, 요소 ​​<div clas="col-1 left">...</div>을 검사하면 IE의 검사기로 이동하여 .left {...}에 대한 float 규칙을 사용 중지하면 모든 것이 모바일에 적합해야합니다.

내가 발견 한 부동 객체는 크로스 브라우저를 다루는 데 약간 까다로울 수 있으므로 절대적으로 필요할 때만 항목을 플로팅합니다.

편집 : 잘못된 코드가 삭제되었습니다. @media screen and (max-width:799px)에 대한 미디어 규칙 이상하게

, 당신은

.col-1.left { 
    float: none; 
    clear: both; 
} 

같은 포함되지 않는 이유 규칙

.col-4.left,.col-3.right { 
    float: none; 
    clear: both; 
} 

.col-2.right { 
    float: none; 
    clear: both; 
} 

궁금 있나요?