1.3、Bootstrap V 4独学の道---スタート---ブラウザサポート

6009 ワード

bootstrap V4 BootstrapV4

サポートされているブラウザ

Bootstrapは、すべての主流ブラウザとプラットフォームの最新の安定したバージョンをサポートします.Windowsでは、**はInternet Explorer 9-11**をサポートしています.以下に詳細なサポート情報を示します.

モバイルデバイス

総じて、Bootstrapはすべての主流プラットフォームの最新バージョンのデフォルトブラウザをサポートします.
Chrome
Firefox
Opera
Safari
Android Browser & WebView
Android
サポート
サポート
サポートされていません
N/A
Android v5.0+サポート
iOS
サポート
N/A
サポートされていません
サポート
N/A

デスクトップブラウザ

ほとんどの最新バージョンのデスクトップブラウザもサポートされています.
Chrome
Firefox
Internet Explorer
Microsoft Edge
Opera
Safari
Mac
サポート
サポート
N/A
N/A
サポート
サポート
Windows
サポート
サポート
サポート
サポート
サポート
サポートされていません

Internet Explorer 9

Internet Explorer 9もサポートされています.しかし、CSS 3プロパティやHTML 5要素が完全にサポートされていないことを知っておく必要があります.
機能
≪ステータス｜Status｜emdw≫border-radiusフィレットボーダー
サポートbox-shadow箱シャドウ
サポートtransform変形
サポート、-msプレフィックス付きtransition遷移
サポートされていませんplaceholderプレースホルダ
サポートされていません

IE互換モード

Bootstrapは、旧バージョンのInternet Explorer互換モードではサポートされていません.IEの最新のレンダリングモードを使用していることを確認するには、次の<meta>ラベルをWebページの適切な場所に置いてください.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

デバッグツールを開いてドキュメントモードを確認するには、F 12を押してドキュメントモードを確認します.
すべてのBootstrapのドキュメントおよび例には、このラベルが含まれており、各バージョンのIEブラウザ(BootstrapでサポートされているIEバージョン)において、最良のレンダリング可能性が得られることを保証します.IEブラウザに対応するには、このラベルの内容をページに含める必要があります.

Windows Phone 8のInternet Explorer 10

Windows Phone 8のInternet Explorer 10のバージョンはUpdate 3(a.k.a.GDR 3)よりも古く、@-ms-viewportルールでdevice widthとviewport widthを区別できないため、BootstrapのCSSでメディアクエリを適用しても機能しない.この問題を解決するには、このバグを迂回するために次のJavaScriptを含める必要があります.Windows phoneの携帯は使えないと思いますハハハ

// Copyright 2014-2015 Twitter, Inc.
  
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)  

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
    var msViewportStyle = document.createElement('style')
        msViewportStyle.appendChild(     
            document.createTextNode(
                '@-ms-viewport{width:auto!important}'
        )   
    )
    document.querySelector('head').appendChild(msViewportStyle)
}

Windows Phone 8 and Device-Widthを参照してください.
注意として、これらをBootstrapのドキュメントに書き、例を挙げて説明しました.

モダリティウィンドウ、ナビゲーションバー、仮想キーボード

オーバーフローとスクロール

iOSおよびAndroidは、<body>要素でoverflow: hiddenを使用するサポートに限られています.したがって、この2つのデバイスのブラウザでは、1つのモードウィンドウの上部または下部を超えると、<body>のコンテンツがスクロールし始めます.

仮想キーボード

また、iOSでは、固定ナビゲーションバーを使用している場合やモードウィンドウで入力方式を使用している場合、仮想キーボードのポップアップがトリガーされると固定要素の位置が更新されないレンダリングバグがあります.この問題に対する少しの融通は、あなたの要素をposition: absolute;に変換することを含み、フォーカスタイマを励起して位置を手動で修正することを含む.これはBootstrapで処理されていないので、あなたのアプリケーションがこの問題があればどのような解決方法を取るかはあなた自身にかかっています.

ナビゲーションバードロップダウンメニュー

iOSでは、z-indexingの複雑さのため、ナビゲーションバーでは.dropdown-backdrop要素は使用できません.したがって、ナビゲーションバーのドロップダウンメニューを閉じるには、ドロップダウンメニュー要素(またはiOSでクリックイベントを開始できる他の要素)を直接クリックする必要があります.

ブラウザのズーム

ページのスケールは、Bootstrapページでも他のページでも、コンポーネントのレンダリング効果に影響を与えることは避けられません.この問題については、修復できるかもしれません(話題を始める前に、できれば検索してください).しかし、直接的な解決策がないか、解決しにくいため、無視する傾向があります.

モバイルデバイスの:hover/:focus粘性

ほとんどのタッチスクリーンでも、本当のサスペンションは実現できません.多くのモバイルブラウザは、県を停止し、:hoverを「粘性がある」ように模倣しています.すなわち、1つの要素に接触した後、:hoverスタイルが適用を開始し、ユーザが別の要素に接触した後に適用を停止する.モバイル優先のサイトでは、このような表現は通常望ましくありません.
Bootstrapには、デフォルトでは使用できませんが、そのトランスフォームが含まれています.Sassコンパイル時から$use-hover-media-queryをtrueに設定すれば、ブラウザでサスペンションをシミュレートするための:hoverスタイルを無効にするために、Bootstrapはmq 4-hover-shimを使用し、粘性の:hoverスタイルを防止することができます.この融通方法にはいくつかの付加的な説明がある.詳細についてはshimのドキュメントを参照してください.

印刷

現代のブラウザでも、印刷が速くなります.
特に、Chrome v 32以降、ページ余白の設定にかかわらず、ページを印刷する必要がある場合、Chromeは物理的な用紙サイズよりも明らかに狭いビューポート幅を使用してメディアクエリを解決します.これにより、印刷時にBootstrapの小さなメッシュが意外にアクティブになります.推奨されるトランスフォーム方法については、12078を参照してください.
それ以外はSafari v 8から0から、固定幅の.containerは、Safariが印刷時に異常な小さなフォントサイズを使用することを引き起こすことができる.詳細については、#14868を参照してください.潜在的なトランスフォーム方法は、次のCSSを追加することです.
Copy

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

Android内蔵ブラウザ

ボックスに加えて、Android 4.1(および更新されたバージョン)は、ChromeではなくBrowserアプリケーションをデフォルトブラウザとして使用します.残念なことに、このBrowserアプリケーションには多くのバグとCSSが一致していません.アンドロイド内蔵ブラウザを捨てたと理解しています.

オプションメニュー

<select>要素では、border-radiusおよびborderが適用されない場合、アンドロイド内蔵ブラウザはエッジコントロールを表示しません.(詳細については、this StackOverflow questionを参照してください.)次のコードクリップを使用すると、Android内蔵ブラウザでこのCSS競合を削除し、<select>をスタイル化されていない要素にレンダリングできます.このユーザエージェントは、Chrome、Safari、Mozillaブラウザへの干渉を回避する嗅覚プローブです.
Copy

<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 demoで探します.

ベリファイア

漏れだらけの古いバージョンのブラウザにできるだけ良い体験を提供するために、Bootstrapは、ブラウザ自体に存在するバグを克服するために、CSSブラウザhacksを複数の異なる場所で使用し、特定のブラウザバージョンに対する特殊なCSSを使用しています.これらのhacksは、CSSベリファイアが使用できないことを明らかにすることを自然に引き起こした.一部の場所では、まだ完全に標準化されていない最先端CSSの特徴も使用していますが、それらを使用するのは純粋に漸進的な強化のためです.
これらのベリファイアの警告は、CSSの非hacky部分が十分に検証されており、使用されるhacky部分が非hacky部分の正常な機能を妨げることはないため、実際には生産上妨げられていません.そのため、私たちがわざと特定の警告を無視した理由です.
私たちのHTMLには、Firefoxのバグが含まれているため、些細で重要ではないHTML検証警告があります.

TS, Generic

Django_Intro