부트스트랩이 브라우저 호환성 문제를 해결하는 방법-부트스트랩 튜토리얼-php.cn

부트스트랩이 브라우저 호환성 문제를 해결하는 방법

爱喝马黛茶的安东尼

풀어 주다： 2019-07-16 17:47:01

원래의

3020명이 탐색했습니다.

Bootstrap은 반응형 레이아웃, 모바일 우선 웹 프로젝트 개발을 위한 가장 널리 사용되는 HTML, CSS 및 JS 프레임워크입니다.

Bootstrap은 Twitter에서 왔으며 현재 가장 인기 있는 프런트 엔드 프레임워크입니다. 부트스트랩은 HTML, CSS, JavaScript를 기반으로 하며 간단하고 유연합니다. 개발 과정에서 해당 클래스를 DOM 요소에 추가하여 호출하기만 하면 웹 개발 속도가 빨라집니다.

부트스트랩이 브라우저 호환성 문제를 해결하는 방법

다음으로 Bootstrap 3 브라우저 호환성 문제와 해당 해결 방법에 대해 이야기하겠습니다.

1. 모바일 장치 지원

부트스트랩이 브라우저 호환성 문제를 해결하는 방법

2. PC 지원

부트스트랩이 브라우저 호환성 문제를 해결하는 방법

참고: Windows는 IE 8-11을 지원합니다.

다양한 브라우저에서 Bootstrap 3에 대한 자세한 지원은 브라우저 지원을 참조하세요.

관련 권장 사항: "Bootstrap 시작하기 튜토리얼"

위에 표시된 대로 IE8이 지원됩니다. 그러나 많은 CSS3 속성과 HTML5 요소는 지원되지 않습니다. 예를 들어 Bootstrap의 반응형 레이아웃은 CSS3의 Media Query 기능을 통해 구현되는데, 이는 다양한 해상도에 따라 다양한 스타일을 일치시킵니다. IE8 브라우저는 이러한 우수한 CSS3 기능을 지원하지 않습니다. Bootstrap은 개발 문서에서 IE8이 미디어 쿼리를 지원하려면 Respond.js를 필요로 한다는 점을 명확하게 지적했습니다. 공식 문서에 따르면 작성자는 HTML 파일의

태그 하단에 다음 코드를 추가했습니다.

<!--[if lt IE 9]>
　 <script src="https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
<![endif]-->

로그인 후 복사

참고: html5shiv.min.js 파일은 이를 수행하는 브라우저를 활성화하기 위한 것입니다. html5 태그를 지원하기 위해 html5를 (완전히) 지원하지 않습니다. response.js 파일은 IE8에서 미디어 쿼리(미디어 쿼리) 지원을 구현하기 위한 것입니다.

그런데 IE8 브라우저에서 페이지를 열어보니 호환성 문제(pit,pit,pit)가 해결되지 않은 것을 발견했습니다. 관련 정보를 참조하여 저자는 몇 가지 참고 사항(효과 달성의 핵심)을 요약합니다.

(1) 로컬 디버깅에는 웹 서버(예: IIS, Apache, Nginx)가 필요하며 단순히 로컬에서 파일을 열 수는 없습니다. 호환성 효과를 확인하세요.

(2) response.js와 Bootstrap이 참조되었지만 여전히 효과가 없다면 Bootstrap이 CDN 파일을 사용하는지 확인하세요.

(3) Bootstrap3에는 Html5 문서 선언이 필요합니다.

(4) Jquery 버전은 2.0 이하이어야 합니다.

템플릿 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
 
<head>
 <!-- 编码格式 -->
 <meta charset="UTF-8">
 <title></title>
 <!-- 作者 -->
 <meta name="author" content="author">
 <!-- 网页描述 -->
 <meta name="description" content="hello">
 <!-- 关键字使用","分隔 -->
 <meta name="keywords" content="a,b,c">
 <!-- 禁止浏览器从本地机的缓存中调阅页面内容 -->
 <meta http-equiv="Pragma" content="no-cache">
 <!-- 用来防止别人在框架里调用你的页面 -->
 <meta http-equiv="Window-target" content="_top">
 <!-- content的参数有all，none，index，noindex，follow，nofollow，默认是all -->
 <meta name="robots" content="none">
 <!-- 收藏图标 -->
 <link rel="Shortcut Icon" href="favicon.ico" rel="external nofollow" >
 <!-- 网页不会被缓存 -->
 <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
 <!-- 解决部分兼容性问题，如果安装了GCF，则使用GCF来渲染页面，如果未安装GCF，则使用最高版本的IE内核进行渲染。 -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <!-- 页面按原比例显示 -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="plugin/bootstrap-3.3.0/css/bootstrap.min.css" rel="external nofollow" >
 <!--[if lt IE 9]>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
 <![endif]-->
</head>
 
<body>
 
 <script src="plugin/jquery/jquery-1.11.2.min.js"></script>
</body>
 
</html>

로그인 후 복사

위 내용은 부트스트랩이 브라우저 호환성 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!