| @技術/プログラミング
Google Readerみたく、iPhoneでアクセスしたときにJavaScriptで画像を縮小表示させるようにしてみた。当然ながら自サーバーにあるものだけでなく、Flickrとかの画像も縮小...

Google Readerみたく、iPhoneでアクセスしたときにJavaScriptで画像を縮小表示させるようにしてみた。当然ながら自サーバーにあるものだけでなく、Flickrとかの画像も縮小表示する。そしてこれまた当然ながら画像をリサイズするわけじゃなくてあくまで小さく表示させるだけなので、ページの読み込み速度とかは短くなったりしない。

    // fit image for iPhone
    function iPhone() {
        var userAgent, imgHeight, imgWidth, imgRatio;
        var newWidth = 440;
        userAgent = navigator.userAgent;
        if (userAgent.match(/iPhone/)) {
            for (i = 0; i < document.images.length; i++) {
                imgHeight = document.images[i].height;
                imgWidth = document.images[i].width;
                imgRatio = imgHeight / imgWidth;
                if (imgWidth > newWidth) {
                    if (imgWidth > imgHeight) {
                        document.images[i].width = newWidth;
                        document.images[i].height = newWidth * imgRatio;
                    } else {
                        document.images[i].width = newWidth;
                        document.images[i].height = newWidth * imgRatio;
                    }
                }
            }
        }
    }

関数名がアホっぽいのはご愛敬。

職場のサーバーは自分でセッティングしないと何もモジュール入ってないのでクライアントサイドで遊べるJavaScriptを気合い入れて勉強しようかな。

この記事に似ている記事

  • Screenshot
    一個前のやつ、セルフ添削してみました。if (imgWidth &gt; imgHeight) のところで True でも False でも同じ処理になってて無意味だったし、i を初期化してなかったし全然ダメダメですね。userAgent っ...
  • サイトの横幅を広げた December 16, 2018
    45408683155 5c0a8b4dc5 h
    サイトの横幅( max-width )を 1280px に広げてみた。最も頻繁にこのサイトを訪れる自分の閲覧環境が 5K ディスプレイになったので昔の環境( 13 インチの MacBook )に合わせて作ったデザインでは横幅が間延びした感じが...
  • Screenshot
    最近のコメントのページ(Recent Comments)で、各コメントのタイトルにマウスオーバーするとコメントの本文を取ってきてぬるっと表示するようにした。Tumblrの notes を読み込むときみたいなアクション。結構かっこいい。コードは...
  • C2ea941eb405843fdfd0bf005f648e20
    Lokka のプレビューはサーバーサイドに保存時と同じパラメーターを POST して、 DB にレコードを保存せずレンダリングだけ行うが、 GitHub や Kibela のようなタブ切り替えでインスタントに Markdown のプレビューが...
  • Screenshot
    クリックした後にしばらく経ってから続きの部分が表示されるだけだとつまらないから、クリックしてから続きが読み込まれるまでの間にローディングgifが表示されるようにしてみた。参考にさせてもらったのはhysyskさんのブログ。ローディングgifはこ...
  • 30176426524 e9127e3deb b
    自作の Lokka プラグインに Amazon の Product Advertising API に問い合わせてアフィリエイトリンク付きの商品画像を返すやつがある。 Amazon 上の商品管理番号を &lt;!-- ASIN=XXXXXXX...

Comments


(Option)

(Option)