まとめ業務システムがiPadで見れない!?社内業務システムなどIEをターゲットとしたWebサイトをスマホで見ると、JavaScriptエラーが発生してサイトが正しく動作しないことがあります。PCの場合なら「IEを互換モードで使用する」といった回避策がありますが、AndroidやiPhone/iPadの場合はそもそもIEが利用できません。そのため、利用者側だけで対応することはできず、少なからずWebサイト側での対応が必要になります。問題はIE独自関数の使用このケースでよくある原因がJavaScriptのattachEvent関数です。この関数はaddEventListener関数の代替として、長らくIE向けサイトで使用されてきましたが、今やEdgeやIE11ではサポートされていません。IE独自関数なので、当然iOSやAndroidでもサポートしていない。attachEvent関数のみを使って構築したサイトはスマートフォンやiPadでは動作しないのです。2つの対応方法さて、attachEvent関数への対処ですが、JavaScriptコードを変更してaddEventListener関数を呼び出すようにする方法が1つ。具体的にはaddEventListenerに対応しているブラウザにはaddEventListener関数を使用し、対応していない場合はattachEvent関数を使用します。以下の例ではマルチデバイスに対応した関数を定義しています。{...});もう一つは、JavaScriptコードは変更せず、HTMLに以下のスクリプトをheadの先頭に追加する方法です。これはattachEvent関数が使えないなら独自に定義してしまおう、というアプローチです。f);};</script>このコードにより、attachEvent関数が動作するようになるので、既存のJavaScriptコードに一切手を入れる必要がありません。前者の方法は対象箇所が少ない場合に手っ取り早いでしょう。後者の方法はジーンコードのようなWeb変換システムを使えば、サイト全体へ一括でタグを追加できます。まとめもともとマルチデバイスに対応していないWebサイトをスマホ対応する場合、HTMLやCSSなどのデザイン面だけではなく、JavaScriptによる機能面にも注目です。スマホやタブレット向けにJavaScriptの動作をカスタマイズするための手段は取れるのか、検討しておくとよいでしょう。シンメトリックでは、ブレイクポイントの設定不要でレスポンシブと同様のマルチデバイス対応を実現する「スマホのサイト制作。GCモバイルファースト」を提供しています。スマホ中心のサイト制作、リニューアルをお考えでしたら、ぜひ使ってみてください。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)検索:最近の投稿レスポンシブデザインのレイアウトパターンと実装方法レスポンシブ対応するためのCSSの書き方レスポンシブサイト用ブレイクポイント考察!時代に適するサイズとは?レスポンシブデザインがSEOに有利な理由レスポンシブデザインの確認が簡単に出来るChromeのデベロッパーツールの使い方レスポンシブ対応ページの簡単な作り方!導入部分を解説します。modernthemes.net。