ID:Bkg6NI さんの質問

modernizr.jsを使った、リサイズ処理について、
iOSではスクロールするだけでresizeイベントが走ったりするので、

if(Modernizr.touch){//スマホ,タブレット向け
$(window).on("orientationchange",function(){
resizeTask();
});
}else{//それら以外のPC向け
$(window).on("resize",function(){
resizeTask();
});
}

のように書いているのですが、これで問題ないのか不安です。
何か問題があればご教示お願いします。

みんなの回答 1 件

ID:Uw5B0H さんの回答

Modernizr.touchは、タッチパネルが搭載されていれば閲覧環境がPCであったとしてもtrueになります。
そのため、スマホ・タブレットの判定に使用するのは危ないと思います。

例えばSurfaceの場合を考えてみてください。
Modernizr.touchはもちろんtrueになります。
しかし、Surfaceはタッチパネルだけではなくマウスでも操作できます。
マウスでウィンドウのサイズを変えることもできますし、ウィンドウの右上にはウィンドウの拡大縮小ボタンもあります。
そうなると、orientationchangeだけでは対応できませんよね?

そんな特殊な環境はサポートしないと言う人もいるかもしれませんが、この環境が特殊ではなくなっていく未来もあるかもしれません。
私が思いつく1番安全な対処法は、orientationchangeは使わずresizeイベントだけにして、iOS対策としてウィンドウの横幅が変わった時だけresizeTaskを実行するという方法です。
高さが変わった時も実行したい場合は、この方法では対応できませんのであしからず。
いちおうサンプルコードを書いておきます(タイプミスあったらごめんなさい)

var windowW = $(window).width();
var oldWindowW = windowW;

$(window).on("resize", function(){
windowW = $(window).width();
if (windowW != oldWindowW) {
resizeTask();
}
oldWindowW = windowW;
});

ID:Bkg6NI

ありがとうございます。
サーフェスは盲点でした。参考になりました。

最終更新日:2016-03-17 (1,259 views)

関連するトピックス

ページ上部に戻る