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

    JavaScript

    「offset」と「style」で取得する値が違う

    ちょっとはまったのでメモ。以下のように「offset」と「sty…

  2. 20120716134815

    JavaScript

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

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

  3. tweenmax_license01.jpg

    JavaScript

    「TweenMax.js」をビジネス利用のためのライセンス購入方法

    いつもJavaScriptのアニメーション部分でお世話になってる「…

  4. style_backgroundImage.jpg

    JavaScript

    背景画像をJavaScriptで入れ替える2種類の方法

    ものごとには「正解」というものがひとつではない、ってことが多いもん…

  5. parseInt.jpg

    JavaScript

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

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

  6. offset_style.jpg

    JavaScript

    「offset」で取得した値を使い回す

    ちょっとはまったのでメモ。以下のように「offset」と「sty…

最近の記事

  1. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  2. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  3. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  4. コミックのイラストが新鮮だった!『MARVEL展』
  5. ジム用に購入♪ リバーサル・オッシュマンズ別注「ドライスウェットショーツ」
  6. 暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」
  7. 水引と風呂敷の包み方のデザインが美しい引き出物「祝づつみ」
  8. 【無印良品】ちょっと小さいクリップも買っておいて損はない「袋止めクリップ・小」
  9. 【無印良品】普通に使えるクリップが安くてうれしい「袋止めクリップ・大」
  10. 今年の手帳はコレに決めた♪「ほぼ日手帳 2017 オリジナル」

アーカイブ

  1. 日常

    「本について」
  2. 日常

    まっったり
  3. 日常

    早起きな日々
  4. FREITAG_STORE_TOKYO-2.jpg

    日常

    アジア初のフライターグ旗艦店「FREITAG STORE TOKYO 」にいって…
  5. monomax_2013_4-1.jpg

    読書

    おまけの「整理ボード」がほしくて『MonoMax 4月号』を買った♪
PAGE TOP