2014年01月20日

ブートストラップ3のブラウザのサポート

ブートストラップ3のブラウザサポートについてです。ブートストラップ3は最新のデスクトップとモバイル用のブラウザ向けで作られている。

古いブラウザは異なって表示されてしまう可能性がある。


●IE8と9

・IE8とIE9はサポートされているがいくつかのCSS属性とHTML5要素がこれらのブラウザで完全にサポートされていないので注意が必要。

・IE8ではメディアクエリーサポートを有効にするのにRespond.jsが必要。

●IE8とRespond.js

・異なるドメイン上でホストされるCSSとRespond.jsを使用する場合は追加の設定が必要。
https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup

・ブラウザのセキュリティルールのためRespond.jsは"file://"プロトコルを介して表示されるページでは動作しない。

IE8でレスポンシブをテストするにはHTTPプロトコルを使ってページを表示する。

・Respond.jsは@importを介して参照されるCSSは動作しない。


●IE8とbox-sizing

・IE8は、min-width, max-width, min-height, max-heightと一緒に使う場合、box-sizing: border-box;を完全にはサポートしない。

そのためv3.0.1ではcontainerクラスでmax-widthを使用していない。


●IEのCompatibilityモード

・ブートストラップは古いIEのCompatibilityモードをサポートしない。

下記メタタグを使用するようにする
<meta http-equiv="X-UA-Compatible" content="IE=edge">
http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e

●Windows8上のIE10とWindows Phone 8

・IE10は"device width"と"viewport width"を区別しないのでブートストラップのCSS内のメディアクエリーが適切に適用されない。

・上記に対応するために
@-ms-viewport { width: device-width; }
を指定した場合、 Windows Phone 8を使用してデバイスでnarrow "phone"ビューの代わりにデスクトップビューで表示してしまいうまく動作しない。

マイクロソフトがfixをリリースするまでCSSとJavaScrptで下記記述をする必要がある。

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

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


●モーダルとモバイルデバイス

・<body>タグの"overflow: hidden"の指定がiOSとAndroidでは制限されてしまう。

モーダルの上下部分を過ぎてスクロールしてしまうと<body>部のコンテンツ部分がスクロールしてしまう。

・モーダル内にinputタグを使用している場合、バーチャルキーボードがトリガーされたとき固定要素の位置が更新されないというiOSのバグが生じる。
posted by ホノデザイン at 10:38| Comment(0) | ブートストラップ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: