JavaScript

iPhoneでWebアプリをデザインするときに気をつけたい、「jpg」ではCSSスプライトができない

css_sprite

そーいえば以前のことになりますが、
iPhoneでWebアプリをデザインするときに気をつけたいことがありました。「jpg」ではCSSスプライトができないんです。
とはいえちゃんと確認したのは2012/8/13日のこと。

Webアプリケーションを作っていると、CSSスプライトを使う機会が増えてきています。画像のファイルを軽量化したいのと、体感速度を上げたいから。

そこで「png」よりもファイル容量が小さくなる「jpg」でCSSスプライトをやれば、アプリの軽量化につながるんじゃないかと思って実装してみました。

すると

Android端末では問題なく動作しているのに、
iPhoneでは正常な動作にならなかったんです。

ファイルを「png」に戻してみると、AndroidとiPhoneのどちらでも動作しました。

CSSスプライトを使うときはiPhoneを対象にするならファイルは「png」にしといたほうが無難だと思います。

iOSのアップデートなどで、この先使えるようになるかもですが。

ねんのためメモでした。

関連記事

  1. obj_clear.jpg

    JavaScript

    配列に入れた無名オブジェクトの値をクリアする

    オブジェクトの値を配列にいれて管理することってけっこうあります。…

  2. scope.jpg

    JavaScript

    JavaScriptでは「変数のスコープ」を正しく理解してエラーを減らそう!

    変数の「スコープ」は正しく理解しないと、エラーにならないエラーが起…

  3. fb022d1ac056d555673c17937de7f431.png

    JavaScript

    強力なアニメーション用のJavaScriptライブラリー「TweenMax.js」が便利!

    jQueryでもアニメーションはできるのですが、それよりも表現力豊…

  4. trycatch.jpg

    JavaScript

    JavaScriptでエラーが起っても固まらないように「try-catch」する

    HTML5とJavaScriptでこねこねしてWebアプリを作って…

  5. js_style.jpg

    JavaScript

    CSSのプロパティをJavaScriptで指定する

    Elementオブジェクトのstyleプロパティでその要素に対し…

  6. chrome_touchevents.jpg

    JavaScript

    WebアプリのデバッグをChromeでやるために「touch events」を有効化する方法

    Webアプリのデバッグは「Chrome」をいつも使ってます。その…

アーカイブ

  1. 日常

    『ブランドらしさのつくり方』
  2. 日常

    決意
  3. 留学

    文化の違い
  4. 宇宙から見たオーロラ展2012

    展覧会

    宇宙から見たオーロラ展2012
  5. 日常

    『伝統の逆襲』
PAGE TOP