1 はじめに
1-1 ウェブブラウザ・デバイス問題
自分のPCで作ったHTML、CSS，JSのサイトが他人のPCでは上手くレイアウトが再現されない場合があります。 段組みが崩れたりして表示がおかしくなる事が多々あるのですが、その原因は何でしょうか？
原因の多くは下記の２点です。
- 使っているブラウザが違う（もしくは設定が違う）
- 使っているデバイス（PCもしくはタブレットやスマホ）が違う
このように使用するブラウザやデバイスの違いで表示崩れなどが起こる問題を
「ウェブブラウザ・デバイス問題」と言います。
2 ビギナー向け・ドキュメント
どんなブラウザの種類があるのか？
- Google Chrome（グーグルクローム）
- Firefox（ファイヤーフォックス）
- Microsoft Edge（マイクロソフト エッジ）
- Internet Explorer（インターネットエクスプローラー）
- Safari（サファリ）
どんなデバイスの種類があるのか？
- PC windows,mac,linux
- スマホ、タブレット iOS,Android
3 会話集
どんなブラウザやデバイスに対応するのか、推奨ブラウザ を定義しないといけない。
未だに 古いIE を使ってる企業がいるので、対応に困るね。
開発者ツールでレスポンシブ対応してるか確認できたんだけど、実機 だと崩れていたね。
4 より深く理解する為に
本来であればブラウザはウェブサイトを表示する物であり、ウェブサイト製作者はブラウザを開発するわけではない。
しかし、ブラウザの種類は多岐にわたっており、デバイスの違いも含め 差異 や バグ が存在する。
例えば、IE自体には潜在的なバグや、ブラウザの実装が他の物に比べると独自の物が多数ある。互換性表示などの機能も初歩的なCSSの崩れを生み出す。 企業、工場ではIE系統のブラウザを未だ使用する会社は多いため、気をつけるポイントがいくつか存在する。
IE以外でもブラウザによる差異は複数存在する。（例えばChromeのセキュリティに対する考え方やアラートは年々厳しくなってきている等）
またデバイスによる違い（同じ名称のブラウザであっても）存在する。
これらは主にCSSの表現やJSの挙動、場合によってはクッキー、セッション、SSLの取り扱いにまで影響を及ぼす。
5 関連ワード
ブラウザの種類
- Internet Explorer / Edge
- Mozilla FIreFox
- Chrome
- safari
・・・etc
デバイス
OS(PC)
- Windows
- Mac
- Linux
- ・・・etc
OS(Tablet,Smart Phon)
- iOS
- Andoroid
- ・・・etc
※ ブラウザやデバイスの違いをUA(ユーザーエージェント）として様々なプログラムで取得可能です。 javascriptでユーザーエージェントの取得：window.navigator.userAgent
6 要点チェック
IEのバージョンだけでなく、OSのバージョンにも依存した挙動の違いが存在する。
OSに含まれるセキュリティソフトやファイアウォールなどの設定も動作に影響する。
browserの設定、ファイアウォール、Windows Defender 等
セキュリティソフトを多重に入れる事の弊害も近年多い。
主に表示くずれに影響
7 一般的な規約
サイト作成の要件定義時には、ブラウザ問題を踏まえ、必ず推奨ブラウザおよびデバイスを定義する。
HTML,CSS,JSに関してもブラウザの対応状況を確認し使用可能、不可な物を明示する。
8 前提知識・資料
- なぜブラウザ間で実装の違いが生まれるのか？
今更ながらブラウザの違いが気になったので、Chrome・Safari・Firefox・IEのエンジンを調べてみた
※ レンダリングエンジンの違い
※ [W3C(ウェブ標準)](w3c)の実装の違いやブラウザバグ
- 開発者ツールはJSでのDOMまで生成されている。ソースはサーバで吐き出されたbody
9 テスト、デバッグ方法
開発者ツールで、各デバイスをエミュレート
※ ただし、一部正確に再現できない場合あり。 iOSなど実機で見たら崩れている場合もあるので注意
古いIEなどの動作検証を行うにはどうすれば良いのか？
クラウドサービス
クラウドサービスの中には様々なブラウザやデバイスをエミュレートする物があります。
10 その他・関連ツール
10-1 ブラウザの拡張機能
- Chrome Extention
クロームエクステンションなどブラウザの機能を拡張する物は多く提供されています。
11 補足
11-1 主にIEに纏わる問題
互換性表示の問題
- IE対策：互換表示させない。
- [2013/イントラネット内で互換表示を有効にする方法(IE8/IE9/IE10/IE11)] (http://furoshiki.hatenadiary.jp/entry/2013/11/25/054707)
video タグで動画が再生されない。Windows 7 IE11 と Windows 8 IE11 は別物。
※ビデオサイズによっていはvideoタグだけで再生できない場合があるというお話し