jQueryを使ってモバイル閲覧時に指定範囲内のサイズの画像を消す:メモ

一方向から悩んで、別方向で解決したので自分用メモとして。

バッドノウハウの可能性が高いので、別の方法があるならそちらを用いることお勧めします。

こうして詰まると、理解できていなかったことが骨身に沁みます…。

実現したいこと

実現したいことは以下の通り。

• WordPressを使用
• モバイル閲覧時に微妙なサイズの画像を非表示にする
• 指定サイズは50px以上100px以下

指定サイズは適当に書いてますが、ある程度の範囲を想定しています。

つまり「モバイル閲覧時に画像のサイズを測定し、範囲内の画像を消す」というだけの処理です。

モバイルでは不安定

PCだけなら下記のようなコードでできるかと思います。

$('img').on('load',function(){
  var w = $(this).width();
  if( w >= 50 && w <= 100 ) {
    $(this).css({'display':'none'});
  }
});

しかしiPhoneやAndroid（確認に用いた実機はiPhone4とAndorid4.2）では、Androidはある程度動き、iPhoneではごく稀に動くという感じでした。

iPhoneの場合はloadの後に仕込んだalertがまず動かなかなったので、onメソッドとimgの扱いがマズかったのだろうと思います。が、いろいろためしても分からず…。

解決策

小粋空間さんの以下の記事で解決できました。

jQueryでスマホサイト向けに画像サイズを縮小する方法

上記記事ではサイズ変更が目的でしたので、指示を書き換えて以下の形に変更。

<?php if(wp_is_mobile()): ?>
<script>
$(function(){
    $('.post img').each(function(){
        var max = 100; // 最大幅
        var min = 50; // 最小幅
        var w = $(this).width();
        if (w <= max && w >= min) {
            $(this).css({'display':'none'});
        }
    });
});
</script>
<?php endif; ?>

結び

結びという程のものもなく、ただただ理解が足りないという認識です。