Webの勉強

Web系の作業で得た知識を備忘録として記録。間違ったていたら、ごめんなさい。

クロスブラウザ

マウスイベントとタッチイベント(Window8対応)

前回の記事の通り、Window8のようにタッチイベント・マウスイベントの両方がそなわっているデバイスで、処理を共通化する方法です。 Windows8のChromeやFirefoxはタッチイベントをサポートしており、画面をタッチして操作した場合はタッチ系のイベントが、マ…

タッチイベントとマウスイベント

スマートデバイス系のタッチイベントと、PC操作時のマウスイベント、どのように処理を共通化すればいいかを調べてみました。 See the Pen wraVLN by satsuki mori (@satsuki) on CodePen. 共通化のポイントは、supportTouchで判別できるとのことです。 var s…

コンテンツ表示領域の取得方法

Windowの内周・外周を取得する方法です。 Windowのプロパティで以下で取得できます。 innerHeight //ウィンドウ内周(コンテンツ表示領域)の高さ innerWidth //ウィンドウ内周(コンテンツ表示領域)の横幅 outerHeight //ウィンドウ外周の高さ outerHeight //…

eventオブジェクト

モダンブラウザ間は、DOMオブジェクトに関する実装の違いはありません。 しかし、「eventオブジェクト」と「windowオブジェクト」には実装の違いが存在します。 ブラウザは以下3つのグループにわかれます。 ①IE ②Mozilla系→Netscape Navigator,Firefox ③Oper…

DOMへのアクセス

DOMへのアクセス方法は大きくわけて2つあります。 ①document.getElementById ②document.all ②のケースは知りませんでした。 実際に実行させてみると、 See the Pen aLojJv by satsuki mori (@satsuki) on CodePen. ①+②どちらも表示 IE7~IE10 ①のみ表示 IE …

クロスブラウザ対応方法

クロスブラウザの対応方法 ①古いブラウザにあわせてかく ②ブラウザ毎にページをわける ③ライブラリを用意し、ライブラリ内で差分を吸収する それぞれデメリット・メリットがある。 ① メリット ・メンテナンスが楽 デメリット ・地味 ・新しい機能がつかえな…

ブラウザの判別方法

ブラウザの動作の違い ブラウザ毎に動作がことなるのは、ブラウザに組み込まれているJavascriptエンジンの違いによります。 InternetExplorer: Chakra Chrome: V8 Firefox: SpiderMonkey 各エンジンに使える関数やプロパティに差分があるため、この差分を埋…