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. tweenmax_js_totation.jpg

    JavaScript

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

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

  2. parseInt.jpg

    JavaScript

    JavaScriptでローカルストレージを使うときに覚えておきたい文字列型から数値型への変換方法

    HTML5を使ったWebアプリをデザインしているときに必要だったの…

  3. js_global.jpg

    JavaScript

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

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

  4. canvas.jpg

    JavaScript

    WebアプリでCanvasを使うための指定方法

    Webアプリをデザインするときのお決まりになりつつあるHTML5の…

  5. oncomplete_function.jpg

    JavaScript

    【TweenMax】「onComplete」で引数を使う方法

    TweenMaxの「onComplete」で引数を使いたい場合って…

  6. 20120716134815

    JavaScript

    正規表現で入力されたテキストが有効かをチェックする

    テキストボックスに入力されたテキストが整数かどうかをチェックします…

最近の記事

  1. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  2. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  3. コミックのイラストが新鮮だった!『MARVEL展』
  4. ジム用に購入♪ リバーサル・オッシュマンズ別注「ドライスウェットショーツ」
  5. 暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」

アーカイブ

  1. 日常

    お気に入りの1本のために
  2. 日常

    再会の仕事
  3. mission_frontier-1.jpg

    展覧会

    「ミッション:フロンティア 知覚の宇宙へ」展
  4. 【UNIQLO】LEGOのロゴが良い!LEGO UTを衝動買い!

    ファッション

    【UNIQLO】LEGOのロゴが良い!LEGO UTを衝動買い!
  5. カタカナ+ローマ字

    プロダクト

    カタカナの響きフォント
PAGE TOP