브라우저 및 기기

알려진 단점과 버그를 포함하여 Bootstrap에서 지원하는 최신 브라우저부터 이전 브라우저까지의 브라우저와 기기에 대해 알아봅니다.

지원 브라우저

Bootstrap은 모든 주요 브라우저 및 플랫폼의 최신, 안정화 릴리즈를 지원합니다. Windows의 경우 Internet Explorer 10-11 / Microsoft Edge도 지원합니다.

최신 버전의 WebKit, Blink, 또는 Gecko를 사용하는 대체 브라우저나 플랫폼의 웹 뷰 API를 직접 사용하는 경우는 명시적으로 지원하지 않습니다. 그러나 (대부분의 경우) 이런 브라우저에서도 Bootstrap은 정상적으로 보이며 작동합니다. 자세한 지원 정보는 아래에 있습니다.

지원되는 브라우저 및 버전은 .browserslistrc 파일에서 확인할 수 있습니다.

# https://github.com/browserslist/browserslist#readme

>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30

우리는 Autoprefixer를 사용하여 CSS 접두사를 통해 Browserslist를 통해 브라우저 버전을 관리해서 의도한 브라우저 지원을 처리합니다. 이러한 도구를 프로젝트에 통합하는 방법은 해당 설명서를 참조해주세요.

모바일 기기

일반적으로 Bootstrap은 주요 플랫폼의 기본 브라우저 최신 버전을 지원합니다. (Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, Amazon Silk 같은) 프록시 브라우저는 지원하지 않는다는 것을 참고해주세요.

Chrome Firefox Safari Android 브라우저 & WebView Microsoft Edge
Android 지원 지원 해당 없음 Android v5.0+ 지원 지원
iOS 지원 지원 지원 해당 없음 지원
Windows 10 Mobile 해당 없음 해당 없음 해당 없음 해당 없음 지원

데스크톱 브라우저

마찬가지로 대부분의 데스크톱 브라우저의 최신 버전을 지원합니다.

Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac 지원 지원 해당 없음 해당 없음 지원 지원
Windows 지원 지원 지원, IE10+ 지원 지원 미지원

Firefox의 경우 일반적인 최신 안정 릴리즈 말고도 확장 지원 릴리즈 (ESR) 버전 파이어폭스도 지원합니다.

공식적으로 Bootstrap은 Chromium 및 Linux용 Chrome, Linux용 Firefox, 그리고 Internet Explorer 9를 지원하지 않지만 정상적으로 표시되고 작동합니다.

Bootstrap이 다루어야 하는 브라우저 버그의 목록은 브라우저 버그에서 확인하실 수 있습니다.

Internet Explorer 10 이상은 지원하지만 IE9와 그 이하는 지원하지 않습니다. 일부 CSS3 속성이나 HTML5 요소는 IE10에서 완벽히 지원하지 않거나 완벽하게 작동하기 위해 접두사 속성이 필요합니다. Can I use…에서 CSS3 및 HTML5 기능의 브라우저 지원에 대한 자세한 정보를 알아보세요. IE8-9 지원이 필요하다면 Bootstrap 3를 사용하세요.

모바일에서의 모달 및 드롭다운

오버플로우 및 스크롤링

iOS 및 Android에서는 <body>에서의 overflow: hidden; 지원이 상당히 제한되어 있습니다. 이를 위해 해당 장치의 브라우저에서 모달의 위나 아래를 스크롤하면 <body> 컨텐츠가 스크롤되기 시작합니다. Chrome 버그 #175502 (Chrome v40에서 해결됨) 및 WebKit 버그 #153852를 확인해주세요.

iOS 텍스트 필드 및 스크롤링

iOS 9.2부터 모달이 열리면 모달이 열려 있는 동안 스크롤 제스처의 초기 터치가 텍스트 <input> 또는<textarea>의 경계 내에 있는 경우, 모달 아래의 <body> 컨텐츠가 모달 대신에 스크롤됩니다. WebKit 버그 #153856를 확인해 주세요.

iOS의 경우 내비게이션 바에서 .dropdown-backdrop 요소는 z-index의 복잡성 때문에 사용되지 않습니다. 그렇기 때문에 내비게이션 바에서 드롭다운로드를 닫으려면 드롭다운 요소 (또는 iOS에서 클릭 이벤트를 발생시키는 다른 요소)를 직접 클릭하는 방법밖에 없습니다.

브라우저 확대

페이지 확대는 불가피하게 부트스트랩 및 나머지 웹을 포함한 렌더링 아티팩트에 일부 컴포넌트를 표시합니다. 이슈에 따라 저희가 해결할 수 있습니다 (먼저 검색한 후 필요하다면 이슈를 열 수 있습니다). 하지만 이것들은 종종 진부한 해결책 외에는 직접적인 해결책이 없기 때문에 이것을 무시하는 경향이 있습니다.

iOS에서 :hover/:focus 고정

대부분의 터치 기기에서 :hover는 사용할 수 없지만, iOS는 이 동작을 에뮬레이션하여 한 요소를 탭한 후에도 "고정되는" 호버 스타일을 유지합니다. 이러한 호버 스타일은 사용자가 다른 요소를 탭하는 경우에만 제거됩니다. 이러한 동작은 대체로 바람직하지 않은 것으로 간주되며 Android 또는 Windows 기기에서는 문제가 되지 않는 것으로 보입니다.

호버링을 에뮬레이트하는 터치 장치 브라우저에서 호버 스타일을 비활성화하는 미디어 쿼리 him을 선택하는 코드가 v4 알파 및 베타 릴리스 전체에 걸쳐 불완전하고 주석 처리되어 포함되었습니다. 이 작업은 완전히 완료되거나 활성화된 것은 아니지만 완전한 망가짐을 피하기 위해 이 shim을 더 이상 사용하지 않고 mixin을 의사 클래스의 바로 가기로 유지하기로 결정했습니다.

인쇄

일부 현대 브라우저에서도 인쇄물이 어색할 수 있습니다.

Safari v8.0부터 고정폭 .container 클래스를 사용하면 인쇄 시 매우 작은 글꼴 크기를 사용할 수도 있습니다. #14868 이슈WebKit 버그 #138192에서 더 많은 정보를 확인해주세요. 한 가지 해결 가능한 방법은 다음 CSS를 사용하는 것입니다.

@media print {
  .container {
    width: auto;
  }
}

Android 스톡 브라우저

기본적으로 Android 4.1 (및 일부 최신 버전)은 브라우저 앱을 기본 웹 브라우저 (Chrome과 별도)로 제공합니다. 불행히도 브라우저 앱에는 일반적으로 많은 버그와 CSS 불일치가 있습니다.

메뉴 선택

Android 스톡 브라우저는 <select>요소에서 border-radius 및/또는 border가 적용된 경우 측면 컨트롤을 표시하지 않습니다. (자세한 정보는 이 Stack Overflow 질문에서 확인해 주세요.) 아래의 코드 스니펫들을 사용하여 위반 CSS를 제거하고 Android 스톡 브라우저에서 <select>를 비정렬 요소로 만듭니다. 사용자 에이전트 스니핑은 Chrome, Safari 및 Mozilla와의 간섭을 방지합니다.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

예제를 보고 싶으신가요? 이 JS Bin 데모를 확인해 보세요.

검사기

Bootstrap은 오래되거나 버그가 많은 브라우저에서도 최상의 환경을 제공하기 위해 여러 곳에서 CSS 브라우저 해킹을 사용하여 특정 브라우저 버그에 대한 특별한 CSS를 대상으로 하여 브라우저 자체의 버그에 대한 작업을 수행합니다. 이러한 해킹은 CSS 유효성 검사기에서 유효하지 않다고 불만을 표시합니다. 몇 곳에서는 아직 완전히 표준화되지 않은 최첨단 CSS 기능을 사용하지만 진보된 향상을 위해 순수하게 사용됩니다.

CSS의 해킹되지 않은 부분은 완전히 검증되고 해킹된 부분은 해킹되지 않은 부분의 적절한 기능을 방해하지 않기 때문에 이러한 유효성 검사 경고는 실제로는 중요하지 않습니다.

우리 HTML 문서도 마찬가지로 특정 Firefox 버그에 대한 대안이 포함되어 있기 때문에 HTML 유효성 검사에서 사소하고 중요하지 않은 경고가 표시됩니다.