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. JavaScript

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

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

  2. JavaScript

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

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

  3. JavaScript

    JavaScriptでグローバル変数を減らす方法

    グローバル変数はいいことない!もしかしたら使っているライブラリー…

  4. JavaScript

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

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

  5. JavaScript

    JavaScript内で、HTMLのIDを直接指定したらダメ

    Webアプリをデザインしていて、JavaScriptの記述について…

  6. JavaScript

    【TweenMax.js】回転アニメーションも楽々!

    以前も記事に書いたアニメーション用のJavaScriptライブラリ…

最近の記事

  1. ホワイトハウスコックスの財布
  2. 進撃の巨人展FINAL チラシ
  3. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  4. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  5. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  6. 【コレクション】カードダス:SDガンダム外伝シリーズ
  7. 懐かしい!!カードダスSD戦国伝!!

アーカイブ

  1. プロダクト

    風邪を引いたときの水分補給にも使える「ポカリスエット スクイズボトル」
  2. 日常

    意外とこぢんまり
  3. 日常

    7/27 セブン・シスターズからブライトンへ
  4. 日常

    デザインの基礎をおさらい
  5. 読書

    今読んだら泣く絵本の1冊『100万回生きたねこ』がドキュメンタリー映画になってた…
PAGE TOP