時々社内ニートのメモ 目指せ非プログラマー

案件がない時は社内ニートなだけだよ (もう何でもごじゃれ c, c++, c#, VB, java, php, javascript, sql, html, css 他)

タブレット端末でのブラウザズーム、ズームアウト時イベント CSS javascript

この記事は追記があります。

 

画面上に帯状のものを表示したい時。

そしてその帯が常に幅いっぱいにするためにCSS

width: 100%;

と書くかと思います。

 

しかし、これが反映されないことが。

タブレット端末で表示を拡大(ズーム)、縮小(ズームアウト)した時

jQueryを使用している時。

こういうのに対応するために

$(window).resize(function(){});

とかやったりするけど、だめ。。。

 

PCのブラウザならいけるのに!くそー!

 

Viewpointすれば?

って言われるかもしれませんが、出来ないのです。

あることをするために、拡大縮小の操作は必要。

さて、どうしたものか。

 

私はひとまず後回しにしてましたが、とうとうなんとかせねばならない時がきました。

 

めんどうだ~

 

そこで見つけたのが

タブレット特有のイベント

ピンチイン、ピンチアウト

 

こちらのページにそのあたりは書いてくれてました。

助かった。

 

jQueryを使ってスマートフォン用のイベントを扱ってみた

 

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;

とかするとついてくるけど。。。

なんとこれもタブレット端末だとおかしな動作にwww

 

私は、上下スクロールの時はついてこないで

左右のスクロールの時だけついてきてほしいのですよ。

 

ってことで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とかで画面より縮小して灰色の画面外?が表示された時に

倍率が灰色のところ入れた倍率なので・・・

そういった拡大縮小の時は計算とかおかしくなるよね・・・

くそ!

なんとか、回避しないとな~