IE8이 데스크탑에 Twitter Bootstrap 3의 모바일 버전을 표시하는 이유는 무엇이며 어떻게 해결할 수 있습니까?

Twitter Bootstrap 3이 포함된 IE8

이 웹페이지에서는 IE8 브라우저와 함께 Twitter Bootstrap 3을 사용할 때의 문제를 살펴보겠습니다.

IE8 문제 설명

문제의 사용자가 웹사이트에서 Twitter Bootstrap 3을 사용할 때 문제가 발생했습니다. 다른 모든 필수 브라우저에서는 웹사이트가 제대로 작동했지만 IE8은 Bootstrap 모바일 버전의 요소를 데스크탑의 전체 화면에 걸쳐 표시했습니다.

사용자는 IE8이 트위터에서 모바일 우선 디자인을 선호하는 것이 문제라고 밝혔습니다. 부트스트랩. 또한 컨테이너 클래스가 의도한 대로 최대 너비 CSS 속성을 가져오지 않았습니다.

해결책

이 문제를 해결하려면, 사용자는 IE8에서 미디어 쿼리 지원을 활성화하는 response.js 라이브러리를 활용해야 합니다. 이는 Bootstrap이 올바르게 작동하려면 미디어 쿼리 지원이 필요하기 때문입니다.

솔루션 구현 단계

1. 다음 줄을 HTML의 헤드 섹션 문서:

<!--[if lt IE 9]>
  <script src="path/to/respond.min.js"></script>
<![endif]-->

2. "path/to/respond.min.js"를 response.min.js 라이브러리의 실제 경로로 바꾸세요.
3. 또는, IE8을 타겟팅하려면 헤드 섹션에 다음 CSS를 포함하세요. 아래:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .container {
    max-width: none;
  }
}

4. 또한 response.js는 로컬 파일에서만 작동하므로 CDN에서 연결하는 대신 bootstrap.css 파일의 로컬 복사본을 사용할 수 있습니다.

추가 정보

• 자세한 내용은 https://getbootstrap.com/getting-started/#support를 방문하세요. 특히 response.js를 사용한 IE8 지원 섹션을 참조하세요.
• respond.js에 대한 자세한 내용은 https://github.com/scottjehl/Respond를 참조하세요. 도서관.

위 내용은 IE8이 데스크탑에 Twitter Bootstrap 3의 모바일 버전을 표시하는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!