主にオリジナルホームページやWEBサイトの作成、構築のデザインや各種ITを扱っています。

主にオリジナルホームページやWEBサイトの作成、構築のデザインや各種ITを扱っています。

電話☎

広告

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 ホムペ

広告

タグ


広告

©MY2 HP (エムワイツー ホームページ) WEBサイト。制作。オリジナルデザイン。作成 。構築。各種IT All Rights Reserved.

PC
表示
スマホ
表示