Navegadores e dispositivos
Saiba mais sobre os navegadores e dispositivos, do moderno ao antigo, que são suportados pelo Bootstrap, incluindo peculiaridades e bugs conhecidos para cada um.
Navegadores compatíveis
O Bootstrap suporta as versões mais recentes e estáveis de todos os principais navegadores e plataformas. No Windows, oferecemos suporte ao Internet Explorer 10-11/Microsoft Edge .
Navegadores alternativos que usam a versão mais recente do WebKit, Blink ou Gecko, seja diretamente ou por meio da API de visualização da web da plataforma, não são explicitamente suportados. No entanto, o Bootstrap deve (na maioria dos casos) ser exibido e funcionar corretamente nesses navegadores também. Informações de suporte mais específicas são fornecidas abaixo.
Você pode encontrar nossa gama de navegadores suportados e suas versões em nosso.browserslistrc file :
# 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
Usamos o Autoprefixer para lidar com o suporte pretendido do navegador por meio de prefixos CSS, que usa o Browserslist para gerenciar essas versões do navegador. Consulte a documentação deles para saber como integrar essas ferramentas em seus projetos.
Dispositivos móveis
De um modo geral, o Bootstrap suporta as versões mais recentes dos navegadores padrão de cada plataforma principal. Observe que os navegadores proxy (como Opera Mini, modo Turbo do Opera Mobile, UC Browser Mini, Amazon Silk) não são suportados.
| cromada | Raposa de fogo | Safári | Navegador Android e WebView | Microsoft borda | |
|---|---|---|---|---|---|
| Android | Compatível | Compatível | N / D | Compatível com Android v5.0+ | Compatível |
| iOS | Compatível | Compatível | Compatível | N / D | Compatível |
| Windows 10 Mobile | N / D | N / D | N / D | N / D | Compatível |
Navegadores de desktop
Da mesma forma, as versões mais recentes da maioria dos navegadores de desktop são suportadas.
| cromada | Raposa de fogo | Internet Explorer | Microsoft borda | Ópera | Safári | |
|---|---|---|---|---|---|---|
| Mac | Compatível | Compatível | N / D | Compatível | Compatível | Compatível |
| janelas | Compatível | Compatível | Suportado, IE10+ | Compatível | Compatível | Não suportado |
Para o Firefox, além da versão estável normal mais recente, também oferecemos suporte à versão mais recente do Extended Support Release (ESR) do Firefox.
Não oficialmente, o Bootstrap deve parecer e se comportar bem o suficiente no Chromium e Chrome para Linux, Firefox para Linux e Internet Explorer 9, embora não sejam oficialmente suportados.
Para obter uma lista de alguns dos bugs do navegador com os quais o Bootstrap precisa lidar, consulte nosso Mural de bugs do navegador .
Internet Explorer
O Internet Explorer 10+ é suportado; IE9 e para baixo não é. Esteja ciente de que algumas propriedades CSS3 e elementos HTML5 não são totalmente suportados no IE10 ou requerem propriedades prefixadas para funcionalidade completa. Visite Posso usar… para obter detalhes sobre o suporte do navegador aos recursos CSS3 e HTML5. Se você precisar de suporte ao IE8-9, use o Bootstrap 3.
Modais e menus suspensos no celular
Estouro e rolagem
O suporte para overflow: hidden;o <body>elemento é bastante limitado no iOS e no Android. Para esse fim, quando você passar pela parte superior ou inferior de um modal nos navegadores desses dispositivos, o <body>conteúdo começará a rolar. Consulte o bug do Chrome nº 175502 (corrigido no Chrome v40) e o bug do WebKit nº 153852 .
Campos de texto e rolagem do iOS
A partir do iOS 9.2, enquanto um modal estiver aberto, se o toque inicial de um gesto de rolagem estiver dentro do limite de um textual <input>ou um <textarea>, o <body>conteúdo abaixo do modal será rolado em vez do próprio modal. Veja o erro #153856 do WebKit .
Listas suspensas da barra de navegação
O .dropdown-backdropelemento não é usado no iOS na navegação devido à complexidade do z-indexing. Assim, para fechar dropdowns em navbars, você deve clicar diretamente no elemento dropdown (ou qualquer outro elemento que irá disparar um evento click no iOS ).
Zoom do navegador
O zoom de página inevitavelmente apresenta artefatos de renderização em alguns componentes, tanto no Bootstrap quanto no resto da web. Dependendo do problema, podemos corrigi-lo (pesquise primeiro e depois abra um problema, se necessário). No entanto, tendemos a ignorá-los, pois eles geralmente não têm solução direta além de soluções alternativas.
Fixo :hover/ :focusno iOS
Embora :hovernão seja possível na maioria dos dispositivos de toque, o iOS emula esse comportamento, resultando em estilos de foco “fixos” que persistem após tocar em um elemento. Esses estilos de foco são removidos apenas quando os usuários tocam em outro elemento. Esse comportamento é considerado amplamente indesejável e parece não ser um problema em dispositivos Android ou Windows.
Ao longo de nossas versões alfa e beta v4, incluímos código incompleto e com comentários para optar por um ajuste de consulta de mídia que desabilitaria os estilos de foco em navegadores de dispositivos de toque que emulam o deslocamento. Este trabalho nunca foi totalmente concluído ou habilitado, mas para evitar quebra completa, optamos por descontinuar este shim e manter os mixins como atalhos para as pseudo-classes.
Impressão
Mesmo em alguns navegadores modernos, a impressão pode ser peculiar.
A partir do Safari v8.0, o uso da .containerclasse de largura fixa pode fazer com que o Safari use um tamanho de fonte incomumente pequeno ao imprimir. Consulte o problema nº 14868 e o bug do WebKit nº 138192 para obter mais detalhes. Uma possível solução alternativa é o seguinte CSS:
@media print {
.container {
width: auto;
}
}
Navegador de ações do Android
Fora da caixa, o Android 4.1 (e até mesmo alguns lançamentos mais recentes aparentemente) são fornecidos com o aplicativo Browser como o navegador da Web padrão (em oposição ao Chrome). Infelizmente, o aplicativo Browser tem muitos bugs e inconsistências com CSS em geral.
Selecione o menu
Em <select>elementos, o navegador de ações do Android não exibirá os controles laterais se houver um border-radiuse/ou borderaplicado. (Consulte esta pergunta do StackOverflow para obter detalhes.) Use o snippet de código abaixo para remover o CSS incorreto e renderizá- <select>lo como um elemento sem estilo no navegador de ações do Android. O sniffing do agente do usuário evita interferência nos navegadores Chrome, Safari e 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>
Quer ver um exemplo? Confira esta demonstração do JS Bin .
Validadores
Para fornecer a melhor experiência possível para navegadores antigos e com bugs, o Bootstrap usa hacks de navegador CSS em vários lugares para direcionar CSS especial para determinadas versões do navegador, a fim de contornar bugs nos próprios navegadores. Esses hacks, compreensivelmente, fazem com que os validadores de CSS reclamem que são inválidos. Em alguns lugares, também usamos recursos CSS de ponta que ainda não estão totalmente padronizados, mas são usados apenas para aprimoramento progressivo.
Esses avisos de validação não importam na prática, pois a parte não-hacky do nosso CSS é totalmente validada e as partes hacky não interferem no funcionamento adequado da parte não-hacky, por isso ignoramos deliberadamente esses avisos específicos.
Nossos documentos HTML também têm alguns avisos de validação HTML triviais e inconseqüentes devido à nossa inclusão de uma solução alternativa para um determinado bug do Firefox .