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

    JavaScript

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

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

  2. parseInt.jpg

    JavaScript

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

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

  3. chrome_touchevents.jpg

    JavaScript

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

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

  4. trycatch.jpg

    JavaScript

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

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

  5. tweenmax_js_totation.jpg

    JavaScript

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

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

  6. fb022d1ac056d555673c17937de7f431.png

    JavaScript

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

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

最近の記事

  1. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  2. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  3. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  4. 【コレクション】カードダス:SDガンダム外伝シリーズ
  5. 懐かしい!!カードダスSD戦国伝!!
  6. 【無印良品】作り置きに欠かせない!バルブ付き密閉保存容器
  7. 【UNIQLO】冬のジム通いにブロックテックフリースパーカをお得に購入!!
  8. 【UNIQLO】冬のジム通いにブロックテックフリースパンツをお得に購入!!
  9. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  10. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」

アーカイブ

  1. santefx_evangelion_asuka-1.jpg

    プロダクト

    ヱヴァンゲリヲン・コラボ目薬のアスカ・モデルを買いました! カラーリングがかっこ…
  2. 20130923111815.jpg

    iOS

    Xcode5の「A valid provisioning profile for…
  3. 日常

    普通の会社
  4. WordPressの基本的な設定項目をおさらい3「表示設定」篇

    WordPress

    WordPressの基本的な設定項目をおさらい3「表示設定」篇
  5. happyturn_yuzu-1.jpg

    グルメ

    後味に「柚子」が香るオトナのおやつ「ハッピーターン 柚子こしょう味」
PAGE TOP