viewportでpc表示sp表示切り替え拡大バグの対応 ~数秒後に切り
タイトルながいのできれました。
pc表示sp表示切り替えボタン設置したら
spからのpcで拡大されてしまう事にきずいたので
jqueryにてviewport書き換え後再読み込み後
また数秒後に書き換えるだけの処理をくわえました。
jquery.cookie.jsをヘッターに読み込み
jquery-1.11.2.min.jsも読み込み
そして↓のjavaを読み込みしておわり。
広告
$(function(){ btnPc = 'pcボタンID'; btnSp = 'SPボタンID'; btnAcvClass = '表示モード中のクラス'; vpPc = 'width=980,user-scalable=yes,maximum-scale=0.35'; vpSp = 'width=device-width,user-scalable=yes,maximum-scale=1'; vpPc2 = 'width=980,user-scalable=yes,maximum-scale=2'; vpSp2 = 'width=device-width,user-scalable=yes,maximum-scale=2';
// ワイド書き換え var cookie = $.cookie('btncookie'); if(cookie == '0'){ $('head').append(''); } else if(cookie == '1'){ $('head').append(''); } // 遅らせて実行 if(cookie == '0'){ window.onload = function(){ setTimeout(function(){ $('head').append(''); },2000); }; } setBtnPc='#'+(btnPc); setBtnSp='#'+(btnSp); $(setBtnPc).on('click',function(){ $('head').append(''); $.cookie('btncookie','0'); location.reload(); return false; }); $(setBtnSp).on('click',function(){ $('head').append(''); $.cookie('btncookie','1'); location.reload(); return false; }); // アクティブ中 var cookie = $.cookie('btncookie'); if(cookie == '0'){ $(setBtnPc).addClass(btnAcvClass); $(setBtnSp).removeClass(btnAcvClass); } else if(cookie == '1'){ $(setBtnPc).removeClass(btnAcvClass); $(setBtnSp).addClass(btnAcvClass); } });
表示ボタンをcookieにのこして
のこってるクッキーから取得したらクラスを適用
これで表示中ボタンがわかる。
更にクッキーを取得した情報処理で
ページ読み込み後2秒に設定してあるしょりで
viewportをさらに上書き。
そのあと再読み込みはしないので
きずいた時には拡大ができる仕組みになってます。
最初はかくだいできません。
それがスマホからpcに切り替えた時の
バグをおこしません。
なぜか
width=980,user-scalable=yes,maximum-scale=0.35
で設定するとふつうにできるので
このように0.35になったのでむしゃくしゃするわ~~
作成者 : MY2 マイツー HP ホームページ 制作 岐阜県 大垣市 デザイン 作成 WEB ホムペ