modernizr.jsを使った、リサイズ処理について、
iOSではスクロールするだけでresizeイベントが走ったりするので、
if(Modernizr.touch){//スマホ,タブレット向け
$(window).on("orientationchange",function(){
resizeTask();
});
}else{//それら以外のPC向け
$(window).on("resize",function(){
resizeTask();
});
}
のように書いているのですが、これで問題ないのか不安です。
何か問題があればご教示お願いします。
みんなの回答 1 件
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;
});
関連するトピックス