タブレット端末でのブラウザズーム、ズームアウト時イベント CSS javascript
画面上に帯状のものを表示したい時。
そしてその帯が常に幅いっぱいにするためにCSSで
width: 100%;
と書くかと思います。
しかし、これが反映されないことが。
タブレット端末で表示を拡大（ズーム）、縮小（ズームアウト）した時
jQueryを使用している時。
こういうのに対応するために
$(window).resize(function(){});
とかやったりするけど、だめ。。。
PCのブラウザならいけるのに！くそー！
Viewpointすれば？
って言われるかもしれませんが、出来ないのです。
あることをするために、拡大縮小の操作は必要。
さて、どうしたものか。
私はひとまず後回しにしてましたが、とうとうなんとかせねばならない時がきました。
めんどうだ～
そこで見つけたのが
タブレット特有のイベント
ピンチイン、ピンチアウト
こちらのページにそのあたりは書いてくれてました。
助かった。
gestureendのイベントを使用
して・・・
おりゃ！
とりゃ！
jQuery使用してます。
$(window).bind('gestureend', function(ev){
var scale = ev.originalEvent.scale;
//scaleに前回からの拡大倍率が入ってます。
//例えばhogeClassの幅を変えたい時の処理
var windowWidth = $('.hogeClass').css('width').split('px')[0];
windowWidth = windowWidth / scale;
});
ってな感じ
さらにresizeのイベントとかでもサイズを変更しておけば完璧！
あぁ～
なんとめんどくさい。
そしてさらに
拡大状態で横スライドさせると
この帯はついてこない。。。
あたりまえっちゃ当たり前だけど
CSSで
position: fixed !important;
position: absolute;
とかするとついてくるけど。。。
なんとこれもタブレット端末だとおかしな動作にｗｗｗ
私は、上下スクロールの時はついてこないで
左右のスクロールの時だけついてきてほしいのですよ。
ってことでmargin-leftを動的に変更してみました。
//スクロールした時の処理
$(window).scroll(function (){
//横スクロールした時についてくるように
$('.hogeClass').css('margin-left', $(window).scrollLeft());
});
これで、横スクロールしても常に左端っこにくっついてます。
例えば横スクロールしても常にmargin-leftを20pxにしておきたい時は
上記のもの4行目を
$('.hogeClass').css('margin-left', $(window).scrollLeft() + 20);
としたら出来るはず・・・検証はしてません。
これですげー拡大縮小しても
常に一定の幅、高さで表すことが出来ますよ！
わーい！
そうそう
上記の流れと同じようにすると
position: fixed !important;
position: absolute;
top: hoge;
left: hoge;
よりさらに動き回ってくれるメニューなんかが出来ます。
フォントのサイズも変更すれば完璧！
Viewpointよりも見たまま表示できるぞ！
ただ、計算とか検証の時間がかかるのがな・・・・
追記：バグ発見！
iPadとかで画面より縮小して灰色の画面外？が表示された時に
倍率が灰色のところ入れた倍率なので・・・
そういった拡大縮小の時は計算とかおかしくなるよね・・・
くそ！
なんとか、回避しないとな～
